title: AngularJs controller, wait for service $http result
body: <p>I want to wait for a service $http result before the controller does the rest.
  I tested some hardcoded JSON for myData and it IS visible in the controller, but as soon as I try to populate myData with a $http request, the controller is not waiting for it and just walks thru the rest of the code. The network tab from Chrome webdevelopper is showing the expected result for the request.</p>
  
  <p>I already have the following:</p>
  
  <pre><code>var ListerApp = angular.module('ListerApp',[
      'ListerAppFilters',
      'sharedFactoryApp',
      'sharedServiceApp',
      'ListerAppController',
      'infinite-scroll',
      'angular-inview',
      'ngRoute'
  ]);
  
  ListerApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $locationProvider) {
      $routeProvider
          .when('/list',
              {
                  templateUrl: '/assets/services/partials/list.html',
                  controller: 'ListerCtrl',
                  resolve : {
                      'sharedServiceAppData': function($sharedServices){
                          // sharedFactoryAppData will also be injectable in your controller, if you don't want this you could create a new promise with the $q service
                          return $sharedServices.promise();
                      }
                  }
              }
          );
  }]);
  
  angular.module('sharedServiceApp', []).service('$sharedServices', ['$http', '$rootScope', '$q', function($http, $rootScope, $q) {
      var myData = null;
  
     return {
          promise : function () {
              if (!myData) {
                  $http({method : 'GET', url : '/shop/api/json', params : {
                          end         : $rootScope.endmarkerSyncDataset,
                          page        : 1,
                          per_page    : $rootScope.itemsPerPage
                      }
                  }).success(function (data) {
                      myData = data.data_set;
                      //deferred.resolve(data.data_set);
                  });
  
                  // I allready tested this and this is OK: myData = {foo : 'bar'};
              }
          },
          getShopData: function () {
              return myData;
          }
      };
  }]);
  
  (function(){
      var appController = angular.module('ListerAppController', []);
  
      appController.controller('ListerCtrl', ['$scope', '$rootScope', '$http', '$filter', '$timeout', '$sharedFactories', '$sharedServices',
          function($scope, $rootScope, $http, $filter, $timeout, $sharedFactories, $sharedServices) {
              $scope.items = $sharedServices.getShopData();
              console.log($scope.items); // return myData -&gt; null
          }
  })();
  </code></pre>