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:

AngularJS - binding/linking two directives together

validation of AngularJS direcrives

remove char from string with angular

REST API with token based authentication

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

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

HTML elements in Angular bindings expression

Angularjs resource with scope parameter

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

success and error function in the controller for a service

How to use a service with Http request in Angular JS

Save to 3 firebase locations with a slow internet connection

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

Create angular page in Django to consume data from JSON

How to add class on ng-click?

Angular submit not called when required fields not filled

AngularJS dynamically call function

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

function is undefined if no module is declared in Angular

recursive function with an array as input

$scope variable does not update within $interval function

AngularJS & Bootstrap Modal - loading template outside controller

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

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

navbar disappears but no dropdown

Using ng-click to toggle between two functions

Merge and sum values and put them in an array

Angular $http and Fusion Tables in IE9

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

calling one controller from another controller

AngularJS: Adding ng-click within element.append

Iframe does not show scrollbar

AngularJS line break at points after a maximum length was reached

Pre-Select of an option in a select not working

Improve slow angular directive

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

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

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

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

How to select multiple selected value from select option

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

angular.js - simplest way to handle click inside controller

UI-Router : Prevent access to parent state

Socket.IO message doesn't update Angular variable

Uncommon “10 $digest iterations reached” case

AngularJS, Animate on change: directive $watch not called

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

AngularJS factory dependencies

Passing params to an angular service from a controller?