Ошибка бесконечной петли: [$ rootScope: infdig]

Question

Я создал функцию delay(), чтобы получить случайный номер задержки для анимации, все работает нормально, но в консоли я получаю этот бесконечный цикл Ошибка: [$ rootScope: infdig] , Я хотел бы установить delay() номер итерации = номер записи работы, как я могу это сделать?

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

Спасибо Blazemonger, я написал новый массив с дополнительной задержкой атрибута, теперь он работает как шарм без ошибок ,

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) 
    }); 
});