Angular JS: “Uncaught Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations”

Question

I got this error in my project. Actually, i have implemented pagination using filters in angular Js, while loading the table with pagination and also showing error in the $scope.$apply() which is in the MainController.

there are two errors in the console,

one is "Error: 10 $digest() iterations reached. Aborting!"

and the other: "Uncaught Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: function (context) {\n for(var i = 0, ii = length, part; i...]]"

and they seem to go together. And paginate() in filter is repetitively calling many times. How to fix it? Any help would be appreciated.

Following is the filter.js used for pagination

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

   filters.filter('filterDependant', function () {
    return function (input, dependant) {
    var out = [];
    if (!jQuery.isEmptyObject(input) && input != "undefined" && input && input.length) {
        for (var i = 0; i < input.length; i++) {
            if (input[i].Dependant == dependant){
                out.push(input[i]);
            }
        }
    }
    return out;
  };
  });
  filters.filter('paginate', function() {
return function(input, currentPage,rowsPerPage) {
    if (!input) {
        return input;
    }

    return input;
   }
  });

    filters.filter('getPaginator', function() {
    return function(input, totolRowCount,rowsPerPage,paginatorSize,currentPage) {       
    var pageList = [];
    var pages = [];

    var noOfPages = parseInt(totolRowCount) / rowsPerPage;


     function makePage(number, text) {
            return {
              number: number,
              text: text,
            };
          }
    var startPage = 1;
    var endPage = noOfPages;
    if(noOfPages!= null && noOfPages!= "undefined"){
    if(paginatorSize < noOfPages){

         startPage = ((Math.ceil(currentPage / paginatorSize) - 1) * paginatorSize) + 1;

         endPage = Math.min(startPage + paginatorSize - 1, noOfPages);
    }   
   }

     // Add page number links
    for (var number = startPage; number <= endPage; number++) {
      var page = makePage(number, number);
      pages.push(page);
    }

    // Add links to move between page sets
    if ( paginatorSize < noOfPages ) {
      if ( startPage > 1 ) {
        var previousPageSet = makePage(startPage - 1, '...');
        pages.unshift(previousPageSet);
      }

      if ( endPage < noOfPages ) {
        var nextPageSet = makePage(endPage + 1, '...');
        pages.push(nextPageSet);
      }
    }



    return pages;
}
  });

   filters.filter('getEndPage', function() {
   return function(input, totolRowCount, rowsPerPage) {

    totalPages = [];

    function makePage(number, text) {
        return {
          number: number,
          text: text,
        };
      }

    var noOfPages = parseInt(totolRowCount) / rowsPerPage;
    var temp = makePage(noOfPages,noOfPages);
    totalPages.push(temp);
    return totalPages;

}

});

Following is the template used for implementing pagination by calling filters

    <tfoot>
    <tr>
        <td colspan="{{this.paginatorColSpan}}">
            <div>
                <ul class="paginate">
                <li><a ng-class="" ng-click="{{this.firstPageClick}}">First</a></li>
                    <li><a ng-class="{firstPage:{{this.currentPageNumber}}+1==1}" ng-click="{{this.prevClick}}">Previous</a></li>
                    <li ng-repeat="value in pageList|getPaginator:{{this.totalRowCount}}:{{this.pageSize}}:{{this.paginatorSize}}:{{this.currentPageNumber}}+1">
                    <a ng-class="{active: value.number=={{this.currentPageNumber}}+1}" ng-click="{{this.pageClick}}">[[value.text]]</a>
                    </li> 
                    <li ng-repeat="value in pageList|getEndPage:{{this.totalRowCount}}:{{this.pageSize}}">
                    <a ng-class="{firstPage:{{this.currentPageNumber}}+1==value.number}" ng-click="{{this.nextClick}}">Next</a></li>
                    <li ng-repeat="value in pageList|getEndPage:{{this.totalRowCount}}:{{this.pageSize}}">
                    <a ng-class=""  ng-click="{{this.pageClick}}">Last</a></li>

                </ul>
            </div>
        </td>
    </tr>
</tfoot>

Mathew Berg Mathew Berg · Accepted Answer · 2014-09-08T14:07:20

Try

{firstPage:((currentPageNumber+1)==1)}

instead of

{firstPage:{{this.currentPageNumber}}+1==1}

Also anywhere else you have done {{}}, I see totalRowCount and currentPageNumber and pageSize and ngClick.

Can you create a jsFiddle of your issue? It seems you are using angular incorrectly.

Angular JS: “Uncaught Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations”

2 Answers