title: AngularJS, how do I use a service to capture HTTP data and bind it to my controller?
body: <p>I have an API call that's working great, but I'd like to use it on several controllers so I moved it to it's own service. I'm running into what looks like a classic Scope issue or a misunderstanding of Angular's digest cycle. </p>
  
  <pre><code>'use strict';
  myApp.factory('Stuff',['$http', function ($http) {
    var Stuff = {};
    Stuff.data = {};
    Stuff.api = 'http://localhost:8080/api/';
    Stuff.getStuff = function() {
      var http_stuff_config = {
        method: 'GET',
        url: Stuff.api + 'stuff/'
      };
      $http(http_stuff_config).then(function successCallback(response) {
        Stuff.data = (response.data);
        console.log(Stuff.data); // Returns populated object. 
      },function errorCallback(response) {
        console.log(response.statusText);
      });
    };
    Stuff.getStuff();
    console.log(Stuff.data); // Returns empty object.
    return Stuff;
  }]);
  
  myApp.controller('appController', ['$scope','Stuff',function($scope,Stuff) {
    $scope.stuff = Stuff;
    console.log($scope.stuff.data); // Returns empty object.
    $scope.stuff.getJobs();
    console.log($scope.stuff.data); // Returns empty object.
  }]);
  </code></pre>
  
  <p>Here's the big clue. The essential output of above, in order is...</p>
  
  <ol>
  <li>empty object (in service after calling method) </li>
  <li>empty object (in controller before calling method) </li>
  <li>empty object (in controller after calling method) </li>
  <li>populated object (in method execution from service)</li>
  <li>populated object (in method execution from controller)</li>
  </ol>
  
  <p>So somewhere between the scope of the getStuff() method and Angular's order of operations, I'm doing something remarkably foolish. Thank you in advance.</p>