Divider into ng-repeat for random number of iterations - angularjs

Question

I need to create an ng-repeat iteration with divider in it. The problem is that I have to add divider after every two, three or four elements randomly. I started with this code:
<li repeat-start="person in persons track by $index">
<p>{{ person.name }}</p>
</li>
<li ng-repeat-end ng-if="($index + 1) % 2 === 0">
<p>--divider--</p>
</li>
It works great when I specify the exact value of 2 inside ng-if. It shows me result like that.
Person 1
Person 2
--divider--
Person 3
Person 4
--divider--
Person 5
etc...
But how to specify this coefficient dynamically? I added a function to genereate a random number among 2, 3 and 4.
$scope.getNumber = function() {
return Math.floor(Math.random() * (3) + 2);
}
But when I try to change hardcoded value I cannot see the desirable result. None of these solutions works. Neigher with simple function call.
ng-if="($index + 1) % getNumber() === 0"
nor with ng-init variations.
<li repeat-start="person in persons track by $index" ng-init="coeff = getNumber()">
<p>{{ person.name }}</p>
</li>
<li ng-repeat-end ng-if="($index + 1) % coeff === 0">
<p>--divider--</p>
</li>
How to achieve this functionality?

Answer 1

The problem was with Infinite $digest Loop, which was caused by fact, that getNumber function returns random results, so AngularJS can't stabilize itself. To calculate getNumber only once for each ng-repeat iteration, you can use ng-init directive, as you already did (may be your code doesn't work due to typo: repeat-start instead of ng-repeat-start):
angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
$scope.persons = [];
for(var i = 0; i < 20; i++)
$scope.persons.push({name:'Person ' + i});
$scope.getNumber = function() {
return Math.floor(Math.random() * 3 + 2);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app='app' ng-controller='ctrl'>
<li ng-init='temp = getNumber()' ng-repeat-start="person in persons">
<p>{{person.name}}</p>
</li>
<li ng-repeat-end ng-if="($index + 1) % temp === 0">
<p>--divider--</p>
</li>
</ul>
Another solution is to "cache" results of getNumber function, for example at person entity:
angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
$scope.persons = [];
for(var i = 0; i < 20; i++)
$scope.persons.push({name:'Person ' + i});
$scope.getNumber = function(person) {
return person.temp || (person.temp = Math.floor(Math.random() * 3 + 2));
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app='app' ng-controller='ctrl'>
<li ng-repeat-start="person in persons">
<p>{{person.name}}</p>
</li>
<li ng-repeat-end ng-if="($index + 1) % getNumber(person) === 0">
<p>--divider--</p>
</li>
</ul>

Answer 2

Try this (some refactorings):
<li repeat-start="person in persons track by $index">
<p>{{ person.name }}</p>
<p ng-if="putDividerHere($index)">--divider--</p>
</li>
$scope.putDividerHere(index) {
var randomNumber = Math.floor(Math.random() * (3) + 2);
return ((index + 1) % randomNumber) === 0;
}

Answer 3

A small change needed. Call a function in your ng-if that cals the getNumber function and returns the condition true/false
HTML:
<li ng-repeat-end ng-if="isShowDivider($index+1)">
<p>--divider--</p>
</li>
JS:
$scope.isShowDivider = function (index) {
if (index % $scope.getNumber() !== 0)
return false;
return true;
}
$scope.getNumber = function() {
return Math.floor(Math.random() * (3) + 2);
}
Edit for the iterations reached. Aborting error.
<li ng-repeat="person in persons track by $index">
<p>{{person.name}}</p>
<p ng-if="isShowDivider($index+1)">--divider--</p>
</li>