Angular.js Factory: Handling $http Asynchronously

February 20, 2015

The Problem:

2015 02 20

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

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

  $http.get('/api').success(function(response) {

  return data;

This issue arises because the return statement is executed before the $http GET request finishes pushing data into the array.

My Solution:

To handle data asynchronously, the controller needs to instruct the service on what actions to take 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) {
  $ = [];

  var handleSuccess = function(response, status) {
    $ = response;


Let me know if you have any questions. 😊

Profile picture

Victor Leung, who blog about business, technology and personal development. Happy to connect on LinkedIn