I'm facing an issue with the $scope.$watch function, as it's not being triggered when expected. In my HTML document, I have a paginator using bootstrap UI:
<pagination total-items="paginatorTotalItems" items-per-page="paginatorItemsPerPage"
page="paginatorCurrentPage" max-size="paginatorSize" class="pagination-sm"
boundary-links="true">
</pagination>
There's a section where my items are displayed (for which I need the paginator):
<div ng-show="reviews" ng-repeat="review in reviewsPerPage">
...
</div>
And here's the corresponding Controller:
...
$scope.reviewsArray = [];
$scope.paginatorItemsPerPage = 1;
$scope.paginatorSize = 3;
$scope.reviewsPerPage = [];
$scope.paginatorTotalItems = $scope.reviews.result.total;
// Converting Restangular object to Array
for (var i = 0; i < $scope.paginatorTotalItems; i++) {
$scope.reviewsArray.push($scope.reviews.result.reviews[i]);
};
$scope.paginatorCurrentPage = 1;
$scope.$watch('paginatorCurrentPage', function () {
var begin = (($scope.paginatorCurrentPage - 1) * $scope.paginatorItemsPerPage);
var end = begin + $scope.paginatorItemsPerPage;
console.log($scope.paginatorCurrentPage);
console.log(begin + ' ' + end);
$scope.reviewsPerPage = $scope.reviewsArray.slice(begin,end);
console.log($scope.reviewsPerPage);
});
To summarize, I'm experiencing a situation where the variable paginatorCurrentPage changes when clicking on the pagination numbers, but the $watch function is not triggered. It only gets called once when setting its value to 1 initially. Despite the visual change in the HTML file:
<p>Current : {{paginatorCurrentPage}}</p>
The issue persists, even after updating to use ng-model instead of page in the paginator. The variable paginatorCurrentPage seems to update visually, but in the controller, it remains at the default $scope.paginatorCurrentPage = 1. This problem still lingers.
Apologies for any language barriers, and thank you for your help!
Edited :
I have made adjustments to the bootstrap UI by replacing 'page' with 'ng-model' in the paginator. However, the issue remains unresolved as the variable paginatorCurrentPage updates only in the view, while in the controller it remains stuck at the default value of $scope.paginatorCurrentPage = 1. Any insights would be greatly appreciated.