Angularjs datatables – data reload when user click on second page

can someone help me with table data reload? Problem is, I have a table and a total of 50000 records from my API call. It spends too much time to load the page so I trying to make reload data when the user clicked the page number. Like example, page 1 load 50 records then load another 50 records when the user clicked on page 2 and so on. The library I used is this https://l-lin.github.io/angular-datatables/archives/#!/serverSideProcessing.

My Idea is, use the LIMIT and OFFSET query in my PHP backend then pass to the angularjs controller. Use ajax to call my backend API and record the current page then pass back to my backend for the second page to call another 50 records data.

My JS code

var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions().withFnServerData(
    function (sSource, aoData, fnCallback, oSettings) {
        $http({
            method: 'POST',
            url: 'API from backend',
            data: {
                start: aoData[3].value,
                length: aoData[4].value,
                draw: aoData[0].value,
                order: aoData[2].value,
                search: aoData[5].value,
                columns: aoData[1].value
            },
            headers: {
                'Content-type': 'application/json'
            }
        })
        .then(function(result) {
            var records = {
                'draw': result.data.draw,
                'recordsTotal': result.data.recordsTotal,
                'recordsFiltered': result.data.recordsFiltered,
                'data': result.data.data
            };
            fnCallback(records);
        });
    }
)
.withDataProp('data') 
.withOption('processing', true)
.withOption('serverSide', true)
.withPaginationType('full')

The data always is null when I check at my backend.
enter image description here

Source: AngularJS