title: AngularJS: Working with callbacks and promises
body: <p>I am unable to wrap my brain around the concept of asynchronous requests.</p>
  
  <p>I have a controller for my view, which is creating an object instance from a provider:</p>
  
  <pre><code>va.controller('VaCtrl',function($scope,$shipment){
      $scope.shipment = $shipment.Shipment();    
  });
  </code></pre>
  
  <p><strong>The provider:</strong></p>
  
  <pre><code>Shipment.provider('$shipment',function(){
  
      this.$get = function($http){
  
          function Shipment(){
  
          }
  
          Shipment.prototype.fetchShipment = function(){
              var shipment = undefined;
                  $http.post('../sys/core/fetchShipment.php',{
                          // some data to POST
              }).then(function(promise){
                      shipment = promise.data;
                  });
  
              return shipment;
          };
  
          return {
              Shipment: function(){
                  return new Shipment();
              }
          }
      }
  });
  </code></pre>
  
  <p>My goal is to get access to the data from <code>Shipment.prototype.fetchShipment()</code> inside my controller. My approach:</p>
  
  <pre><code>$scope.fetchShipment = function(){
         var shipment = $scope.shipment.fetchShipment();
          console.log(shipment); // undefined
  };
  </code></pre>
  
  <p>However, this will return undefined.</p>
  
  <p>I read about $q, and defers, promises and callbacks, and now i am like WTF; all i want to do is to push the retrieved data to my controller, what is the best possible way to do so?</p>