I have implemented angular pagination to display records. Each record has a button labeled 'Assign to me'. Clicking on this button removes the selected record from the list. However, I am facing an issue where I display 10 records per page and if I click 'Assign to me' for 3 records, all 3 are removed simultaneously. The expected behavior is for the first page to fetch 3 additional records from the second page to replace the ones that were removed. Unfortunately, this is not happening as only 7 records are being displayed and the empty spaces left by the removed 3 records are not filled. Here is the relevant code snippet:
//Pagination Settings
$scope.quoteCurrentPage = 1;
$scope.quoteTotalItems = 834;
$scope.maxSize = 5;
$scope.itemsPerPage = 10;
//HTML
<uib-pagination total-items="quoteTotalItems" ng-model="quoteCurrentPage" max-size="maxSize" class="pagination-sm" items-per-page="itemsPerPage" boundary-links="true" rotate="true"></uib-pagination>
<div class="panel-body" ng-repeat="quote in quotes.slice(((quoteCurrentPage-1)*itemsPerPage), ((quoteCurrentPage)*itemsPerPage))">
........
</div>
Any assistance would be greatly appreciated.