angular datatables server pagination

I am trying to implement server-side pagination on an angular datatable but I keep on getting the following error: Error: You cannot use server side processing along with the Angular renderer!

Please see the relevant code below:

purchasesTable.jade

.panel.panel-default.userTable
  .panel-heading.tableStatementHeader Purchases
  .panel-body
    div()
      table.row-border.hover(datatable='ng', dt-options='purchasesCtrl.dtOptions', dt-columns='purchasesCtrl.dtColumns')

purchasesTable.controller.js

    (function() {
        'use strict';

        angular
            .module('app.purchasesTable')
            .controller('PurchasesTableController', PurchasesTableController);

        PurchasesTableController.$inject = ['envService','$resource', 'DTOptionsBuilder', 'DTColumnBuilder','$http','$state','$stateParams','PurchasesTableService', '$scope'];
        function PurchasesTableController(envService, $resource, DTOptionsBuilder, DTColumnBuilder,$http,$state,$stateParams,PurchasesTableService,$scope) {

            var vm = this;

            activate();

            ////////////////

            function activate() {
              vm.id = $stateParams.id;

              //STYLE TABLES
              vm.dtOptions = DTOptionsBuilder.newOptions()
                                .withOption('ajax', function(data, callback, settings){
                                  console.log(data);

                                  PurchasesTableService.getData()
                                    .then(function(result){
                                      console.log('THIS', result);
                                    });
                                })
                                .withDataProp('data')
                                .withOption('serverSide', true)
                                .withOption('processing', true)
                                .withOption('order', [[0, 'desc']])
                                .withPaginationType('full_numbers');
              vm.dtColumns = [
                  DTColumnBuilder.newColumn('event_date').withTitle('Event Date'),
                  DTColumnBuilder.newColumn('title').withTitle('Store'),
                  DTColumnBuilder.newColumn('reason').withTitle('Reason'),
                  DTColumnBuilder.newColumn('amount').withTitle('Amount'),
                  DTColumnBuilder.newColumn('locking_date').withTitle('Locking Date'),
                  DTColumnBuilder.newColumn('id').withTitle('ID'),
                  DTColumnBuilder.newColumn('sid').withTitle('SID')
              ];

        }
    }
})();

purchasesTable.service.js

(function() {
    'use strict';

    angular
        .module('app.purchasesTable')
        .service('PurchasesTableService', PurchasesTableService);

    PurchasesTableService.$inject = ['$http'];
    function PurchasesTableService($http) {
        this.getData = getData;

        ////////////////

        function getData () {
          var gaBody = {
            'start':0,
            'length':10,
            'columns[0][data]':1,
            'order[0][column]':0,
            'order[0][dir]':'desc'
          };
          var req = {
            method: 'POST',
            url: 'api/endpoint',
            headers: {
              'Authorization': 'something something'
            },
            data: gaBody
          };
          return $http(req).then(function(resp) {
            return resp.data.data;
          });
        }
      }
})();

I know there are some syntax errors in the code above but I can't seem to get past the initial server side processing error. Originally, I was making an http POST request to the API endpoint and displaying the response using ng-repeat. I thought that this error was being thrown because of ng-repeat but after removing that code and trying to generate the table data through the .withOption('ajax', etc. instead, the error is still being thrown. Any help would be greatly appreciated. Thank you.