A custom paging component was developed based on the provided description to accept data from a wrapper controller (mainController). Feel free to view the demonstration.
This should be beneficial.
Paging Component -
app.component("paging", {
templateUrl: 'pagingComponent.html',
bindings: {
data: '<'
},
controllerAs: 'model',
controller: pagingControllerFn
});
function pagingControllerFn() {
var model = this;
model.currentPage = 0;
model.pageSize = 0;
model.limit = model.data.length;
model.$onInit = function() {
model.pageSize = 10; //do intialization
}
model.$onChanges = function(changes) {
model.data = changes; //Called in case of any change in parent controller data
};
model.numberOfPages = function() {
return Math.ceil(model.limit / model.pageSize);
}
model.incrementPage = function() {
model.currentPage = model.currentPage + 1;
}
model.decrementPage = function() {
model.currentPage = model.currentPage - 1
}
}
Component Html (pagingComponent.html) -
<div>
<select ng-model="model.pageSize" id="pageSize" class="form-control">
<option value="5">5</option>
<option value="10" ng-selected="true">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<ul>
<li ng-repeat="item in model.data | startFrom:model.currentPage*model.pageSize | limitTo:model.pageSize">
{{item}}
</li>
</ul>
<button ng-disabled="model.currentPage == 0" ng-click="model.decrementPage()">
Previous
</button>
{{model.currentPage+1}}/{{model.numberOfPages()}}
<button ng-disabled="model.currentPage >= model.limit/model.pageSize - 1" ng-click="model.incrementPage()">
Next
</button>
</div>
Usage -
<body data-ng-app="myApp" data-ng-controller="mainController as vm">
<paging data="vm.data"></paging>
</body>