title: AngularJS ng-repeat with data from service
body: <p>Originally in my app, I created controllers with very basic $http calls to get a resource by getting the ID of an object from the url ($routeParams).  Ng-repeat display the results correctly.</p>
  
  <p>However, I noticed refreshing in a later view (different controller) wiped out the data and broke the page.  So, I created a function on the service to be used in multiple controllers, to check whether the data has is available and to react as follows:</p>
  
  <p>1) If the resource is defined, return it (no API call)
  2) If the resource is not defined, get the id from the url and get it from the API
  3) If the resource is not defined &amp; you can't get the ID, just return false.</p>
  
  <p>However, this broke the code: the template rendered before the service returned the data, and ng-repeat did not update.  The code looks like this:</p>
  
  <pre><code>angular.module('myApp', ['ngCookies'])
      .config(...)
      .service('myService', ['$cookies', '$http', function($cookies, $http) {
          myData = {};
  
          return {
              getData:function(dataID) {
                  if(myData.name) {return myData);
                  else if (dataID &amp;&amp; dataID !== '') {
                      $http.get('/api/data/' + dataID)
                          .success(function(data) {
                              myData = data.object;
                              $cookies.dataID = data.object.id;
                              return myData;
                          }
                  }
                  else { return false; }
              }
          }
      }]);
  
  function myCtrl($scope, $http, $routeParams, myService) {
      $scope.data = myService.getData($routeParams.dataID);
  
      ...
  }
  </code></pre>
  
  <p>And here's the template.  It's in jade, which means rather than angle brackets, you just list the element with parameters in parenthesis right after, and content after the parenthesis.</p>
  
  <pre><code>h2 My heading
  ul
      li(ng-repeat='option in data')
          a(href="#", ng-click='someFuncInCtrl(option.name)')  {{ option.name }}
  </code></pre>
  
  <p>When the controller did the $http.get itself, the ng-repeat worked fine because the $scope was updated in the ".success" callback.  Now that there's a service that returns the data after a slight delay, "$scope.data" is just undefined, the ng-repeat list is empty.</p>
  
  <p>I used a console.log to check myData right before return "return myData", and the myData is working, it just isn't returned in time, and for whatever reason the list is not updating whenever $scope does get the data.</p>
  
  <p>I looked a using $routeProvider's resolve... but that makes getting the ID from the url challenging, as the resolve object doesn't seem to have access to $routeParams.  I know that $scope.$apply is supposed to help update the scope when it's altered by outside functions... but I have no clue where to put it.  The <a href="https://stackoverflow.com/questions/13163227/angularjs-ngrepeat-not-updating-display-properly">most similar problem</a> on SO didn't use a service.</p>
  
  <p>I tried:</p>
  
  <pre><code>$scope.$apply($scope.data = myService.getData($routeParams.dataID));
  </code></pre>
  
  <p>And</p>
  
  <pre><code>$scope.$apply(function() {
      $scope.data = myService($routeParams.dataID);
  });
  </code></pre>
  
  <p>Both times I only got Error: $digest already in progress.</p>