title: Angular ensure list is updated without page reload
body: <p>I have an Angular table that should be updated anytime someone adds an item via form. Sometimes it will display the item immediately, but other times it requires a page refresh. I have tried to use $scope.$apply as follows to refresh a REST call that feeds the list, but it is giving me the following error:</p>
  
  <p>Error: [$rootScope:inprog] <a href="http://errors.angularjs.org/1.3.8/" rel="nofollow">http://errors.angularjs.org/1.3.8/</a>$rootScope/inprog?p0=%24digest</p>
  
  <p>My core question is can Angular listen to changes to data stored in a REST call to make a change without a page refresh, and if not, what is the best method for meeting my goal of refreshing page data after form entry?</p>
  
  <p>Here is my controller for displaying data:</p>
  
  <pre><code>appControllers.controller('appHomeItemsCtrl', ['$scope', 'appItems', function ($scope, appItems) {
  
  $scope.items = [];
  
  appItems.query({}, function (data) {
      $scope.items = data.value;
  // Use scope apply to watch for changes instead of requiring a page reload for results
      scope.$apply();
  });
  }]);
  </code></pre>
  
  <p>Here is my HTML that displays the data:</p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th&gt;
                     Summary
                  &lt;/th&gt;
                  &lt;th&gt;
                      Task Type
                  &lt;/th&gt;
              &lt;/tr&gt;
  
              &lt;tr ng-repeat="item in items"&gt;
  
                  &lt;td&gt;
                      {{item.Title}}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{item.Body}}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{item.Task_x0020_Type}}
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>Here is my controller for adding an item:</p>
  
  <pre><code>appControllers.controller('appItemPostCtrl', ['$scope', '$location', 'appItems', 'appTypes', function ($scope, $location, appItems, appTypes) {
  
  var itemEntry = new appItems;
  
   $scope.types = [];
  
  // Get list of types for use in dropdown
   appTypes.query(function (typedata) {
       var itemTypes = typedata.value; 
      // Foreach type, push values into types array
      angular.forEach(itemTypes, function (typevalue, typekey) {
  
          $scope.types.push({
              label: typevalue.Title,
              value: typevalue.Title,
          });
      })
  });
  
  // Create item
   $scope.createItem = function () {
      console.log("Clicked");
      itemEntry.Task_x0020_Type = $scope.selectedtype.value;
      itemEntry.Title = $scope.itemtitle;
      itemEntry.Body = $scope.itembody;
      itemEntry.$save();
      $location.path('/');
  }
  
  $scope.cancel = function () {
      $location.path('/');
  }
  }]);
  </code></pre>
  
  <p><strong>UPDATE:</strong> Using this, it will execute some, but not all of the time. The same is true of the answer provided regarding creating a function or push. Why does it work only "most" of the time?</p>
  
  <pre><code>appControllers.controller('appHomeItemsCtrl', ['$scope', 'appItems', function ($scope, appItems) {
  
  $scope.items = [];
  
  // Use $scope.$evalAsync to watch for changes instead of requiring a page reload for results
  $scope.$evalAsync(function () {
  appItems.query({}, function (data) {
                  $scope.items = data.value;
  
      })
  });
  }]);
  </code></pre>