Another Infinite $digest Loop - angularjs

Question

Doing a loop within a loop in a view:
<tr ng-repeat="result in results">
<td>
<span ng-repeat="device in helpers.getIosDevices(result.ios_device)">
{{ device.code }}
</span>
</td>
</tr>
The controller:
$scope.helpers = CRM.helpers;
The helper:
var CRM = CRM || {};
CRM.helpers = {
// Handle "111" value format
getIosDevices: function (devices) {
var obj = [];
if (devices !== null && devices !== undefined) {
if (devices.charAt(0) === '1') {
obj.push({
code: 'ipod',
name: 'iPod',
});
}
if (devices.charAt(1) === '1') {
obj.push({
code: 'ipad',
name: 'iPad',
});
}
if (devices.charAt(2) === '1') {
obj.push({
code: 'iphone',
name: 'iPhone',
});
}
}
return obj;
}
};
Got this error: https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5B%22fn:%E2%80%A620%20%20%7D;%20newVal:%20undefined;%20oldVal:%20undefined%22%5D%5D
as I understand but I don't know how can I solve it in my case. What workaround should I use?

Answer 1

The reason of this error that you try to change source list in ng-repeat directive during digest cycle.
<span ng-repeat="device in helpers.getIosDevices(result.ios_device)">
^^^^^^^^
and obj.push(/* ... */) in getIosDevices
First we need ask our self when digest cycle will stop looping: It will stop when Angular detect that on several iterations the list didn't change. In your case each time when ng-repeat calls getIosDevices method - the list gets different items and therefore it looping again till you get limit and Angular drops this exception.
So what is a solution:
In Angular its not good practice to call method getList() in ngRepeat. Because developpers make bugs.
Its clear that in your case getIosDevices() list depends on results therefore I would create different fixed object with some watcher on results and write HTML part like:
<tr ng-repeat="result in results">
<td>
<span ng-repeat="device in devices[result.ios_device]">
{{ device.code }}
</span>
</td>
</tr>
where devices represents Map.
This is some demo that might help you:
$scope.results = [{
ios_device: "100"
}, {
ios_device: "010"
}, {
ios_device: "001"
}];
$scope.devices = {
"100": [{
code: 'ipod',
name: 'iPod1',
},
{
code: 'ipod',
name: 'iPod2',
}],
"010": [{
code: 'ipod',
name: 'iPod1',
},
{
code: 'ipad',
name: 'iPad2',
}],
"001": [{
code: 'ipod',
name: 'iPod1',
},
{
code: 'iphone',
name: 'iphone2',
}],
}
HTML
<table>
<tr ng-repeat="result in results">
<td><span ng-repeat="device in devices[result.ios_device]">
{{ device.code }}
</span>
</td>
</tr>
</table>
Demo in Fiddle