I'm using a dirPagination.js for my angularJS pagination and using this code

 < uib-pagination class="pagination float-right" total-items="data.length" ng-model="page" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=selectvalue></uib-pagination>

If i'm using this code below my graph is showing perfectly fine but my pagination has a problem it is not showing completely all the pager that I need. For example I have a total of 15 data and I filter it by 5 items per page, my pager only shows page 1 and 2 only.

And if I change code below into collection in data = collections my pagers works fine it display 3 pages but my problem here is that my graph is not showing(the picture). I don't know why I have this problem for the graph but they don't have a related data.

 < div class="col-sm-4" ng-repeat="collection in collections | orderBy:sortColumn:reverseSort | limitTo:selectvalue:selectvalue*(page-1)">

I have this code for chart.js to display a data for a doughnut graph and working fine.

    <div class="graph-chart" style="position: relative; height:20vh; width:20vw;">
        <canvas id="doughnut" class="chart chart-doughnut doughnut-year"
             colours="colours"
             chart-data="data" chart-labels="labels"></canvas>
 </div>

CodePudding user response：

I solve it using this code

  <div class="col-sm-4" dir-paginate="collection in  collections | itemsPerPage:selectvalue" current-page="page">

and as for the pager to show I use this

<dir-pagination-controls class="pagination"></dir-pagination-controls>