ng-repeat inside another ng-repeat causing pagination issues

Question

i have ng-repeat inside another ng-repeat and both has paginated data. The main one is working fine but the paginated data inside the ng-repeat not working always .It throwing console errors .

Error: [$interpolate:interr] Can't interpolate: Page {{curPage + 1}} of {{ numberOfPages() }} TypeError: Cannot read property 'length' of undefined .

<div ng-repeat="item in items | hbStartFrom: savedcurPage * savedpageSize | limitTo: savedpageSize">
                <span>{{ item.id }}</span>
                <span ng-click="showResults();">Show results</span>
                <ul style="display:none">
                <li ng-repeat="subitem in item.newitems | hbStartFrom: curPage * pageSize | limitTo: pageSize">
                {{ subitem.name}}
                </li>
                </ul>
                <div class="pagination pagination-centered" ng-show="subiitm.newitems.length > 5">
                    <ul>
                        <li>
                            <button type="button" ng-disabled="curPage == 0" ng-click="curPage=curPage-1">&lt; PREV</button>
                        </li>
                        <li><span>Page {{curPage + 1}} of {{ numberOfPages() }}</span></li>
                        <li>
                            <button type="button" ng-disabled="curPage >= subiitm.newitems.length/pageSize - 1" ng-click="curPage = curPage+1">NEXT &gt;</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pagination pagination-centered " ng-show="item.length > 10 ">
            <ul>
                <li>
                    <button type="button" ng-disabled="savedcurPage == 0" ng-click="savedcurPage=savedcurPage-1">&lt; PREV</button>
                </li>
                <li><span>Page {{savedcurPage + 1}} of {{ numberOfSavedPages() }}</span></li>
                <li>
                    <button type="button" ng-disabled="savedcurPage >= item.length/savedpageSize - 1" ng-click="savedcurPage = savedcurPage+1">NEXT &gt;</button>
                </li>
            </ul>
        </div>




            //pagination for first loop
            $scope.savedcurPage = 0;
            $scope.savedpageSize = 10;
            $scope.numberOfSavedPages = function() {
                return Math.ceil( $scope.items.length / $scope.savedpageSize);
            };

            // pagination for second loop
            $scope.curPage = 0;
            $scope.pageSize = 5;
            $scope.numberOfPages = function() {
                return Math.ceil($scope.subitem.newitems.length / $scope.pageSize);
            };

            // pagination filter
angular.module('samplemodule').filter('hbStartFrom', function()
{
    return function(input, start)
    {
        start = +start;
        return input.slice(start);
    };
});

Answer 1

You should pass the item as parameter of numberOfPages method, or its index.

redefine your method like this:

$scope.numberOfPages = function(item) {
    return Math.ceil(item.newitems.length / $scope.pageSize);
};

and on your view, call it passing the item.

{{ numberOfSavedPages(item) }}

Or, use the $index

$scope.numberOfPages = function(index) {
    return Math.ceil($scope.items[index].newitems.length / $scope.pageSize);
};

/// view
{{ numberOfSavedPages($index) }}