how to apply pagination.js with ui-grid

At the moment, I can successfully display the pagination controller, but I have a situation where when I click on the next page my uigrid table does not change the content immediately, and it only changes when I mouse over the table. (the information of pagination.js is on http://pagination.js.org ) HTML:

<div id="pagination-container" ></div>

JS(Controller)

function init() {
initGrid();
.........
initPagination($scope.gridOptions.data,5,2);
.........
}

var initPagination = function(data, pageSizeOfGrid, pageRangeOfGrid) {
    var container = $('#pagination-container');
        container.pagination({
            dataSource: data,
            pageSize: pageSizeOfGrid,
            pageRange: pageRangeOfGrid,
            showGoInput: true,
            showGoButton: true,
            /** overwrite methods/events of buttons **/
            afterPreviousOnClick: function() {
                console.log('previous page!');
                $scope.gridApi.pagination.previousPage();
            },
            afterNextOnClick: function() {
                console.log('next page!');
                $scope.gridApi.pagination.nextPage();
            },
            afterPageOnClick: function() {
                console.log('selected page: ', 
                container.pagination('getSelectedPageNum') );
                //$scope.gridApi.pagination.seek();
            }

        })
    };

I find a solution, just add a code to refresh the ui grid table

afterPreviousOnClick: function() {
            console.log('previous page!');
            $scope.gridApi.pagination.previousPage();
            $scope.gridApi.core.refresh(); // ro refresh the table
        },