javascript - How to make ng-repeat work with a function returning a new object? -

in html, have following element:

<button ng-click="console.log(key)" ng-repeat="(key, value) in getlskeys() track $index"> 

and in js have:

$scope.getlskeys = function(){     return localstorageservice.get('accountkeys'); }; 

the local storage value can seen here: http://codebeautify.org/jsonviewer/daf62c

no matter do, error:

uncaught error: [$rootscope:infdig] 10 $digest() iterations reached. aborting! watchers fired in last 5 iterations: [["fn: $watchcollectionwatch; newval: 121; oldval: 118"],["fn: $watchcollectionwatch; newval: 124; oldval: 121"],["fn: $watchcollectionwatch; newval: 127; oldval: 124"],["fn: $watchcollectionwatch; newval: 130; oldval: 127"],["fn: $watchcollectionwatch; newval: 133; oldval: 130"]] 

i understand ng-repeat tries match exact object, different every time , getlskeys creates , returns new object. not understand why "track $index" not fix problem; understanding, track implemented solve specific problem. doing wrong?

you should first transform object in array, instance

var arr = []; var obj = localstorageservice.get('accountkeys'); (var in obj) {   var item = obj[i];   item.id = i;   arr.push(item); } 

then bind ng-repeat array, , avoid infinite redigestion track element according unique identifier (for instance i've called id here, contains different email address)

<button ng-click="console.log(key)" ng-repeat="item in getlskeys() track item.id"> 

note: more performant object array transformation outside of getlskeys if possible, not done again on every digest cycle.