Angular.js Factory Handling $http Asynchronously

The Problem:

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) {
    data.anArray.push(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) {
    $scope.data = [];

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

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

Let me know if you have any questions. 😊