I am attempting to utilize ng-repeat with the result of a function call, like this:
<body ng-init='a = [1, 2, 3]'>
<div ng-repeat='item in f(a) track by item[0]'>{{item}}</div>
</body>
where the function f is defined as:
function f (arr) {
return arr.map(function (v) {
return [v]
})
}
An example can be found on Plunker containing this code.
The issue arises when console displays errors such as
10 $digest() iterations reached. Aborting!This problem cannot be attributed to recreating the container array, because if we simply modify line 3 like this:
return [v] -> return v
and remove
track by item[0]
everything functions correctly. It seems that the error stems from the recreation of items where track by should handle this. However, for some reason it does not :(
In an attempt to resolve the issue without using track by, I tried adding a constant $$hashKey to each item (even on the collection itself). Another Plunker demonstrating this error can be found here: Plunker. I am hopeful that someone can explain why this approach is not effective.
Therefore, there are two distinct questions to address: one regarding the use of track by and the other involving $$hashKey.
By the way, I have already consulted the following resources multiple times: How to Loop through items returned by a function with ng-repeat? and AngularJS InfDig error (infinite loop) with ng-repeat function that returns array of objects, but unfortunately, I have not found a solution there.
Thank you