How to implement server side pagination in angularjs using angular-ui bootstrap.?

DirPaginate is something that'll meet the requirements of this question

Please see this Plunker for demo of this.

When using server side pagination, you'll have to get JSON response in this format.

Format of your JSON response

{
    Count: 1400,
    Items: [
        { // item 1... },
        { // item 2... },
        { // item 3... },
        ...
        { // item 25... }
    ]
}

The only thing that you need to watch is that you get total count of items in your database because you'll need this to pass it to our directive.

Format of your angular Controller

.controller('UsersController', function($scope, $http) {
    $scope.users = [];
    $scope.totalUsers = 0;
    $scope.usersPerPage = 25; // this should match however many results your API puts on one page
    getResultsPage(1);

    $scope.pagination = {
        current: 1
    };

    $scope.pageChanged = function(newPage) {
        getResultsPage(newPage);
    };

    function getResultsPage(pageNumber) {
        // this is just an example, in reality this stuff should be in a service
        $http.get('path/to/api/users?page=' + pageNumber)
            .then(function(result) {
                $scope.users = result.data.Items;
                $scope.totalUsers = result.data.Count
            });
    }
})

and finally this is an example of how you'll integrate it in your html

HTML

<div ng-controller="UsersController">
    <table>
        <tr dir-paginate="user in users | itemsPerPage: usersPerPage" total-items="totalUsers" current-page="pagination.current">
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
        </tr>
    </table>

    <dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
</div>

Please see Working with Asynchronous data section of this page.

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#working-with-asynchronous-data