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:

How to use a service with Http request in Angular JS

AngularJS & Bootstrap Modal - loading template outside controller

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

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

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

function is undefined if no module is declared in Angular

How to select multiple selected value from select option

Using ng-click to toggle between two functions

Angularjs resource with scope parameter

Uncommon “10 $digest iterations reached” case

recursive function with an array as input

AngularJS - binding/linking two directives together

Passing params to an angular service from a controller?

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

Angular submit not called when required fields not filled

Pre-Select of an option in a select not working

How to add class on ng-click?

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

Socket.IO message doesn't update Angular variable

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

AngularJS dynamically call function

remove char from string with angular

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

AngularJS line break at points after a maximum length was reached

Create angular page in Django to consume data from JSON

Iframe does not show scrollbar

AngularJS: Adding ng-click within element.append

UI-Router : Prevent access to parent state

REST API with token based authentication

$scope variable does not update within $interval function

angular.js - simplest way to handle click inside controller

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

Improve slow angular directive

Save to 3 firebase locations with a slow internet connection

calling one controller from another controller

HTML elements in Angular bindings expression

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

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

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

success and error function in the controller for a service

Merge and sum values and put them in an array

validation of AngularJS direcrives

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

Angular $http and Fusion Tables in IE9

AngularJS, Animate on change: directive $watch not called

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

navbar disappears but no dropdown

AngularJS factory dependencies

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