AngularJS 1.3 ng-repeat not updating with new database addition

Question

I am having trouble getting my listings page to refresh when a new item has been added. The code below successfully adds a new document to the database from a detail page and then returns to the listings page but the listings page is not updated until I manually press F5.

I have tried adding a $route.reload() statement but that did not help. The problem fixes itself after a few times. In other words the first one or two times a new document is added the listing page does not refresh and show the new item but by the third consecutive addition the listings page will start to refresh every time. I am using Firefox but see the same problem in other browsers.

What code am I missing to make sure that the listings page ng-repeat will re-run after a new item is added to the database? I have the same problem elsewhere in my app when I remove items from the database, the listings page ng-repeat does not re-fire and show the updated list.

securityApp.controller('newDocumentController', 
   function ($scope, $location, $route, addNewDocumentFactory) {

      $scope.addNewDocument = function () {
         addNewDocumentFactory.create($scope.document);
         alert('New Document has been added');
         $location.path('/documents');
      };
});

securityApp.factory('addNewDocumentFactory', 
   function ($resource) {
      return $resource('/api/Documents/', {}, {
         create: { method: 'POST' }
      });
});



<tr ng-repeat="document in documents | orderBy:['-date', '-documentNumber'] | filter:searchText | filter: {date: searchDate}">
   various td elements here..
</tr>

Are you using some cache system ? How do you load your documents in your listing page ? — tomaoq
– tomaoq, Commented Dec 5, 2014 at 8:35
I'm not using any caching. The listings page uses the ng-repeat listed above. — Austin Harris
– Austin Harris, Commented Dec 5, 2014 at 8:52
$http.get('/api/Documents/') .then(function (response) { $scope.documents = response.data; }); — Austin Harris
– Austin Harris, Commented Dec 5, 2014 at 8:52
The above tr ng-repeat template is associated with which controller? Which template and which controller are affiliated with /documents and how? ngroute? — deitch
– deitch, Commented Dec 5, 2014 at 9:27

Idkt · Accepted Answer · 2014-12-05 09:24:51Z

1

You should use promises since this is an async call;

securityApp.controller('newDocumentController', 
   function ($scope, $location, $route, addNewDocumentFactory) {

      $scope.addNewDocument = function () {
         addNewDocumentFactory.create($scope.document).$promise.then(function () {
             alert('New Document has been added');
             $location.path('/documents');
         });
      };
});

answered Dec 5, 2014 at 9:24

Idkt

3,0034 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Austin Harris Over a year ago

$scope.addNewDocument = function () { addNewDocumentFactory.create($scope.document).$promise.then(function () { alert('New Document has been added'); $location.path('/documents'); $route.reload(); }); };

Austin Harris Over a year ago

Nice, thank you! I added the $promise.then and the $route.reload() and that seems to be working with getting the documents listing page to display the newly added document.

Collectives™ on Stack Overflow

AngularJS 1.3 ng-repeat not updating with new database addition

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related