Angular UI Client Side Pagination

I would like to enable pagination and I'm torn between client side and server side pagination. In the long term (more data) it is probably better to do server side pagination, but I haven't found a good tutorial on it.

I use Angular/Express/Mongo. I have the Boostrap UI in use, and would like to use their pagination directive for pagination. I have read some articels on how to kind of do it, but they are outdated and I cannot get it to work. http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-through-client-side-data.html

Could anybody help me get that example to work with Bootstrap UI for Angular?

If you have a set number of items per page, you could do it this way :

Define an angular service to query the data on your server.

.factory('YourPaginationService', ['$resource',
    function($resource) {
        return $resource('baseUrl/page/:pageNo', {
            pageNo: '@pageNo'
        });
    }
]);

Call it via the angular controller. Don't forget to inject your service, either globally or in the controller.

$scope.paginationController = function($scope, YourPaginationService) {

    $scope.currentPage = 1;

    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
        YourPaginationService.query({
            pageNo: '$scope.currentPage'
        });
    };

};

On express 4 (if you have it), set up your route.

app.route('/articles/page/:pageNo')
    .get(data.listWithPagination) //random function name

Then you need to wire that function with the desired Mongo request in your Node controller. If you have Mongoose, it works like this :

exports.listWithPagination = function(req, res) {
    var pageLimit = x;    //Your hardcoded page limit
    var skipValue = req.params.pageNo*pageLimit;
    YourModel.find() //Your Mongoose model here, if you use Mongoose.
    .skip(skipValue)
    .limit(pageLimit)
    .exec(function(err, data) {
        if (err) {
            return res.send(400, {
                message: getErrorMessage(err)
            });
        } else {
            res.jsonp(data);
        }
    });
};

That's how I would do it on a typical MEAN stack. If you're working with different libraries/technologies, you might need to adapt a few things.