Simple pagination with angularjs - angularjs

Question

I'd like to implement pagination with AngularJS but I have some problems.
I don't know how to update the $scope.agreements object when clicking on a new page...
var app = angular.module("GestiawebApp", []);
app.controller("AgreementsController", function($scope, $http) {
var nbPages, limit;
$http.get('/api/agreement').success(function(data, status, headers, config) {
limit = data.limit;
nbPages = Math.ceil(data.agreements.length/data.limit);
$scope.agreements = data.agreements.slice(0, limit);
});
$scope.getPages = function() {
var pages = [];
for (var i = 1; i <= nbPages; i++) {
pages.push(i);
}
return pages;
};
$scope.goToPage = function(page){
// simple test to change the agreements, but it seem's not working
$scope.agreements = $scope.agreements.slice(page*limit, (page*limit)+limit);
};
});
<!-- Loop -->
<tr ng-repeat="agreement in agreements | filter:search">
<td>{{agreement.number}}</td>
<td>{{agreement.reference}}</td>
<td>
{{agreement.billbook.capital}} €
</td>
</tr>
<!-- End loop -->
<!-- Paginaiton -->
<ul>
<li ng-repeat="i in getPages() track by $index" ng-click="goToPage($index+1)">{{$index+1}</li>
</ul>
<!-- End pagination -->

Answer 1

You should store all agreements data in a variable to use for paginating
$scope.allAgreements = [];
$http.get('/api/agreement').success(function(data, status, headers, config) {
limit = data.limit;
nbPages = Math.ceil(data.agreements.length/data.limit);
$scope.allAgreements = data.agreements; //new change
$scope.agreements = $scope.allAgreements.slice(0, limit);
});
$scope.goToPage = function(page){
// simple test to change the agreements, but it seem's not working
$scope.agreements = $scope.allAgreements.slice(page*limit, (page*limit)+limit);
};