Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations:

[Tarun Kumar]

Hi,

I am new in angularjs. Trying to implement img lazy loading. I made a directive which is replace place holder img when real img load.

JS Code :: 

var imgPlaceHolders = [ "1.png","2.png", "3.png",.......,"10.png"];

$scope.getImgPlaceHolder = function() {

var index = Math

.floor((Math.random() * 10) + 1);

// alert("index :: " + index);

// alert($rootScope.imgPlaceHolders[index]);

return imgPlaceHolders[index];

}

Code is :-

HTML Code :: 

<img hires = "{{post.album[0].replace('/size/', '/300/')}}" ng-src="{{getImgPlaceHolder()}}">  

directive ::

var imageLazyLoaingDirectives = angular.module('imageLazyLoaingDirectives', []);

imageLazyLoaingDirectives.directive('hires', function() {

return {

restrict : 'A',

scope : {

hires : '@'

},

link : function(scope, element, attrs) {

// alert("scope.hires :: " + scope.hires);

element.one('load', function() {

element.attr('src', scope.hires);

});

}

};

});

Plz any one tell me what I did wrong.