title: How to use data from API in factory AngularJS
body: <p>I have the below code which uses the data in the staff array to calculate the staff members pay. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  var app = angular.module('app', []);
  app.factory('staffFactory', function ($http) {
      var staff = [
          {"id": "1","name": "Kate","rate": "10", "hours": "10"},
          {"id": "2","name": "John","rate": "20", "hours": "10"},
          {"id": "3","name": "Matt","rate": "15", "hours": "10"}
      ];
  
    function calcPayInner(){
      var unique = {},
          distinct = [],pay = [];
      for (var i in staff) {
          if (typeof (unique[staff[i].id]) == "undefined")  {
              distinct.push(staff[i].id);
          }
          unique[staff[i].id] = unique[staff[i].id] || {pay:0};
          unique[staff[i].id].name = staff[i].name;
          unique[staff[i].id].pay += (parseInt(staff[i].rate, 10) * parseInt(staff[i].hours, 10));
      }
  
          for (var p in unique) {
              pay.push([p, unique[p]]);
              pay.sort(function (a, b) {
                return (b[1].pay - a[1].pay);
              });
          }
          return pay;
      }
      var staffService = {};
      staffService.allStaff = function () {
          return staff;
      };
  
      staffService.CalcPay = function () {
          return calcPayInner();
      };
  
      return staffService;
  });
  
      app.controller('MainCtrl', ['$scope', 'staffFactory', function ($scope, staffFactory) {
          $scope.staff = staffFactory.allStaff();
          console.log($scope.staff);
          $scope.CalcPay = staffFactory.CalcPay();
          $scope.keyPress = function(keyCode){
              $scope.CalcPay = staffFactory.CalcPay();
          };    
      }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="app"&gt;
          &lt;div ng-controller="MainCtrl"&gt;
            &lt;table&gt;
              &lt;tr&gt;&lt;td&gt;name&lt;/td&gt;&lt;td&gt;rate&lt;/td&gt;&lt;td&gt;hours&lt;/td&gt;&lt;/tr&gt;
              &lt;tr ng-repeat="s in staff"&gt;
                  &lt;td&gt;{{s.name}}&lt;/td&gt;
                  &lt;td&gt;&lt;input ng-keyup="keyPress(s.rate)" ng-model="s.rate"&gt;&lt;/td&gt;  
                  &lt;td&gt;&lt;input ng-keyup="keyPress(s.hours)" ng-model="s.hours"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
            &lt;table&gt;
              &lt;tr&gt;&lt;td&gt;name&lt;/td&gt;&lt;td&gt;pay&lt;/td&gt;&lt;/tr&gt;
              &lt;tr ng-repeat="b in CalcPay"&gt;
                  &lt;td&gt;{{b.1.name}}&lt;/td&gt;
                  &lt;td&gt;{{b.1.pay}}&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;          
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This all works as intended however now I want to get the staff data from an API call rather than hard coded data.</p>
  
  <p>I have tried the below. (<a href="http://plnkr.co/edit/V8KMTxKfgh5H83lKsR0G" rel="nofollow">see plnkr</a>)</p>
  
  <pre><code>    var staff = [];
      var test = $http.get('staff.json')
      .success(function(data) {
          staff = data;
          console.log(staff);
      });
  </code></pre>
  
  <p>Which seems to return the data as I can see in my console but I can't get it to work (returns a blank array) with my existing function.</p>
  
  <p>I have also tried to wrap the function in .finally after .success but then my function becomes undefined.</p>
  
  <p>How can I use the API Data in the functions in my factory so I can get my page working as it was originally with the hard coded array?</p>