Not able to paginate in Angularjs Datatable

I am using angularjs + datatable plugin . But for some reason it is not giving me any option to click next pages (the page number that appear at the bottom 1 2 3 ....).

In the image which is the footer of the table, there are total 22 records and 10 are being displayed but the number 2 is not displayed for the subsequent page in the footer.

Following is controller code.

angular.module('tableTest', ['datatables']).controller('TableCtrl',function ($scope,$compile,DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
     url: '/tableDatalist',
     type: 'GET'
 })
 .withDataProp('data')
    .withOption('serverSide', true)
    .withOption('createdRow', function(row, data, dataIndex) {
        $compile(angular.element(row).contents())($scope);
    })
    .withOption('responsive', true)
    .withPaginationType('full_numbers');
vm.dtColumns = [
    DTColumnBuilder.newColumn('group').withTitle('Group').withOption('bSortable',true),
    DTColumnBuilder.newColumn('startTime').withTitle('Start').withOption('bSortable',true),
    DTColumnBuilder.newColumn('endTime').withTitle('End').withOption('bSortable',true),
    DTColumnBuilder.newColumn('status').withTitle('Status').withOption('bSortable',true),
    DTColumnBuilder.newColumn('reason').withTitle('Reason').withOption('bSortable',true),
    DTColumnBuilder.newColumn('transactionGroup').withTitle('Transaction Group').withOption('bSortable',true),
    DTColumnBuilder.newColumn('geoGroup').withTitle('Geo Group').withOption('bSortable',true),
    DTColumnBuilder.newColumn('group').withTitle('Current Status').renderWith(function(data, type, full, meta) {
        var arr = full.endTime.split(/-|\s|:/);
        var endTime = new Date(arr[0], parseInt(arr[1])-1, arr[2], arr[3], arr[4], arr[5]);
        arr = full.startTime.split(/-|\s|:/);
        var startTime = new Date(arr[0], parseInt(arr[1])-1, arr[2], arr[3], arr[4], arr[5]);
        var currentTime = new Date();
        var color = ['#2196F3','#009688'];
        var currentStatus = ['INACTIVE','ACTIVE']
        var index;
        if(startTime.getTime() <= currentTime.getTime() && currentTime.getTime() <= endTime.getTime()) {
            index = 1;
        } else {
            index = 0;
        }
        return '<span style="background : '+color[index]+';color: #FFF;font-weight: 500;" class="currentStatus"> &nbsp;&nbsp;'+currentStatus[index]+'&nbsp;&nbsp; </span>';
    }).notSortable(),
    DTColumnBuilder.newColumn('code').withTitle('Select').notSortable().renderWith(function(data, type, full, meta) {
        return '<span class="code"> <input type="checkbox" ng-model="_'+data+'" ng-change="toggleExistingTransactionSelection('+data+',_'+data+')"></span>';
    })
]; 
});

following is the HTML:

<div ng-controller="TableCtrl as showCase">
                        <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
                    </div>

Server Side code:

    @RequestMapping(value = "//tableDatalist", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public ResponseEntity<String> getTransactionGroupList(HttpServletRequest httpRequest) {
    try {
        // some logic...
        resource.put("data", rows).put("recordsTotal",page.getTotalElements()).put("recordsFiltered", rows.length()).put("draw", httpRequest.getParameter("draw"));
        return new ResponseEntity<String>(resource.toString(), HttpStatus.OK);
    } catch(Exception e) {
        LOG.error("Error while getting allowed resources : ", e);
        ErrorResponse er = new ErrorResponse().serverError().setMsg("........");
        return new ResponseEntity<String>(er.toJson(), HttpStatus.BAD_REQUEST);
    }
}

Following is the link for what is sent and received from server.

I don't understand why it is not showing the page 2 in the footer.