NG-Repeat doesn't update cleanly when scope is updated

Question

So I have a list of workspaces:

<li class="workspace-object" ng-repeat="w in workspaces | filter:searchQuery" ng-click="selectWorkspace(w)">
    <a href="" class="workspace-link">{{w.name | titleCase }}</a>
</li>

That List gets updated in the database by some function, and then I call the loadWorkspaces function below, to re-populate the $scope.workspaces object

$scope.loadWorkspaces = function() {
  APIService.getWorkspaces().then(function(data){
    $scope.workspaces = data;
  });
}

When this happens, the $scope.workspaces, when logged out, reads the right updated information immediately, however, the ng-repeat DUPLICATES, before it updates to the proper list. I have no idea why this happens. Any ideas? In this example, I am updating the workspace title, and that update runs the loadworkspaces function.

Answer 1

Try this ...

w in workspaces track by $index

When the contents of the collection change, ngRepeat makes the corresponding > changes to the DOM:

• When an item is added, a new instance of the template is added to the DOM.
• When an item is removed, its template instance is removed from the DOM.
• When items are reordered, their respective templates are reordered in the DOM.

By default, ngRepeat does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.

If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.

For example, you may track items by the index of each item in the collection, using the special scope property $index