Angular.js factory: Handle $http asynchronously

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 ☺

Originally published at victorleungtw.com on December 27, 2014.