Infinite loop Error: [$rootScope:infdig] - angularjs

Question

I created a function delay(), to get random delay number for animation, everything is working fine, but in console I get this infinite loop Error: [$rootScope:infdig]. I'd like to set delay() iteration number = work record number, how can I do it ?
HTML:
<div id="work" class="work" ng-controller="WorkCtrl">
<ul class="grid">
<li class="wow zoomIn" data-wow-delay="0.{{ delay() }}s" ng-repeat="w in work | orderBy:'id':true">
<a href="{{ w.link }}" target="blank_">
<div class="background"></div>
<h3 class="name">{{ w.name }}</h3>
<p class="description">{{ w.description }}</p>
<img ng-src="{{ w.image_path }}">
</a>
</li>
</ul>
JS:
var app = angular.module("portfolio", []);
app.controller('WorkCtrl', function($scope, $http) {
$http.get('work.json').success(function(work) {
$scope.work = work;
});
$scope.delay = function(minNum, maxNum) {
minNum = 0;
maxNum = 5;
return (Math.floor(Math.random()*(maxNum - minNum + 1)) + minNum);
};
});

Answer 1

Thank You Blazemonger, I wrote a new array with an extra attribute delay, now it works like a charm with no errors.
HTML:
<div id="work" class="work" ng-controller="WorkCtrl">
<ul class="grid">
<li class="wow zoomIn" data-wow-delay="0.{{ w.delay() }}s" ng-repeat="w in workList | orderBy:'item.id':true">
<a href="{{ w.item.link }}" target="blank_">
<div class="background"></div>
<h3 class="name">{{ w.item.name }}</h3>
<p class="description">{{ w.item.description }}</p>
<img ng-src="{{ w.item.image_path }}">
</a>
</li>
</ul>
</div>
JS:
$scope.workList = [];
angular.forEach($scope.work, function(item) {
minNum = 0;
maxNum = 5;
$scope.workList.push({
item: item,
delay: (Math.floor(Math.random()*(maxNum - minNum + 1)) + minNum)
});
});