How to softly update $scope and template using Angularjs? -

let's have array in $scope :

userlist = [ {      firstname : 'john',      visits : 1,      colors : { red : 1, yellow : 0 }  } ]; 

the template looks :

<ul>     <li ng-repeat="user in userlist">         {{user.firstname}} - {{user.visits}} <br/>         (red: {{user.colors.red}}; yellow: {{user.colors.yellow}})<br/>         {{user.foo}}     </li> </ul> 

then receive new data sever :

newuserlist = [ {      firstname : 'john',      visits : 2,      colors : { red : 5, yellow : 1 },     foo : 'bar' } ]; 

to make updates effective i'm doing simple $scope.userlist = newuserlist;

the problem doing way clears whole element before setting new values. template becomes <ul></ul> before returning <ul><li>(...data...)</li></ul>

i'd update/push/add new values. kind of merge/extend doesn't change things date. guess there's proper way couldn't find right answer yet.

you can use track by specify how objects in collection associated dom elements.

for example:

<li ng-repeat="user in userlist track user.firstname"> 

when using , assigning new array of users, long tracked property of user object same previously, considered same object , angular update existing dom element instead of recreating it.

note value of property tracking must unique, user.firstname not choice.