Infinite loop Error: [$rootScope:infdig]

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

});

See http://stackoverflow.com/questions/21586369/random-orderby-in-angularjs-1-2-returns-infdig-errors — Blazemonger, Nov 17 '14 at 19:17

score 0 · Accepted Answer · edited Apr 27 '16 at 23:22

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

Infinite loop Error: [$rootScope:infdig]

1 Answers1