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.

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

Related:

Getting CROS Error even after adding header in node.js for Angular js

AngularJS, Animate on change: directive $watch not called

success and error function in the controller for a service

Angular ng-repeat cache (avoid re-rendering on state change)

Getting generic anchor text on click with angularJS/jQuery returns empty string

Passing params to an angular service from a controller?

AngularJS factory dependencies

Create angular page in Django to consume data from JSON

How to add class on ng-click?

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

$http.get returns actual php script instead of running it (yeoman, grunt)

Angularjs $watchCollection on $rootScope not triggered when values updated from directive

angular.js - simplest way to handle click inside controller

Angular $http and Fusion Tables in IE9

$scope variable does not update within $interval function

How can this be undefined in the constructor of an Angular config class?

Uncommon “10 $digest iterations reached” case

Pre-Select of an option in a select not working

function is undefined if no module is declared in Angular

AngularJS dynamically call function

How do I add a class on ng-click from layout?

calling one controller from another controller

Can't save json data to variable (or cache) with angularjs $http.get

Angular controller error: 'Controller is not a function, got undefined'

AngularJS: Adding ng-click within element.append

HTML elements in Angular bindings expression

Iframe does not show scrollbar

REST API with token based authentication

Using ng-click to toggle between two functions

How to define style to layout-margin flex variants, using Angular Material

Socket.IO message doesn't update Angular variable

Merge and sum values and put them in an array

recursive function with an array as input

Angularjs resource with scope parameter

AngularJS & Bootstrap Modal - loading template outside controller

AngularJS - binding/linking two directives together

Improve slow angular directive

Angular-strap data-trigger='focus' not working

How to select multiple selected value from select option

Save to 3 firebase locations with a slow internet connection

validation of AngularJS direcrives

Angular submit not called when required fields not filled

navbar disappears but no dropdown

Can't get angular.js to loop through array and post to html

AngularJS line break at points after a maximum length was reached

Is there a way to fire an event every time an ajax call in made in AngularJS?

UI-Router : Prevent access to parent state

remove char from string with angular

How to use a service with Http request in Angular JS