The problem:

When I was using $http service to get data from a remote API, my code below was not able to return data back to the controller.

    myApp.factory('myFactory', function($http){
      var data = { anArray:[] };

      $http.get('/api').success(function(data) {
        data.anArray.push(data);
      });

      return data;
    });

This is because the return data is already executed before the $http get request finish pushing data into the array.

My solution:

In order to handle data asynchronously, the controller needs to tell the service what to do when the data is received later:

    myApp.factory('myFactory', function($http){
      return {
        getData: function(){
          return $http.get('/api');
        } };
      });

    myApp.controller('MyController', ['$scope', 'myFactory', function($scope, myFactory) {
      $scope.data = [];

      var handleSuccess = function(data, status){
        $scope.data = data;
      };

      myFactory.getData().success(handleSuccess);
    }

Let me know if you have any questions ☺