Angularjs + Datatable

HTML

 <div class="table-responsive">  
           <table id="tbl-list-deal" datatable dt-options="customer.dtOptions" dt-columns="customer.dtColumns" dt-instance="dtInstanceCallback" class="table table-striped table-bordered custom-table-mobile">  
           </table>  
         </div>  

Angular Controller

  
   $scope.customer = {};
    $scope.filter = {
      gender: '',
      name: '',
      phone: '',
      email: ''
  };
$scope.customer.dtOptions = DTOptionsBuilder.newOptions()  
     .withFnServerData(serverData)  
     .withDataProp('data')  
     .withOption('searching', false)  
     .withOption('processing', true)  
     .withOption('serverSide', true)  
     .withOption('paging', true)  
     .withPaginationType('simple_numbers')  
     .withDisplayLength(10)  
     .withLanguage({  
       "sLengthMenu": $translate.instant('table_controls_sLengthMenu'),  
       "sLoadingRecords": $translate.instant('table_controls_sLoadingRecords'),  
       "sProcessing": $translate.instant('table_controls_sProcessing'),  
       "oPaginate": {  
         "sFirst":$translate.instant('table_controls_sFirst'),  
         "sLast": $translate.instant('table_controls_sLast'),  
         "sNext": $translate.instant('table_controls_sNext'),  
         "sPrevious": $translate.instant('table_controls_sPrevious'),  
       },  
       "sInfo": $translate.instant('table_controls_sInfo'),  
       "sInfoEmpty": $translate.instant('table_controls_sInfoEmpty')  
     })  
     .withOption("lengthMenu", [ [5, 10, 15], [5, 10, 15] ])  
     .withOption('fnRowCallback',  
       function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {  
         $compile(nRow)($scope);  
         $('td', nRow).unbind('click');  
         $('td', nRow).bind('click', function() {  
           // $scope.$apply(function() {  
           //   $scope.openPopUp(aData);  
           // });  
         })  
         return nRow;  
       });  
   function serverData(sSource, aoData, fnCallback, oSettings) {  
     //All the parameters you need is in the aoData variable  
     var draw = aoData[0].value;  
     var order = aoData[2].value;  
     var start = aoData[3].value;  
     var length = aoData[4].value;  
     var xSession = $cookieStore.get("cookieXsession");  
     var url = appSetting.backEndClingMe+'customer/list?';  
     url += '&gender=' + $scope.filter.gender;  
     url += '&name=' + $scope.filter.name;  
     url += '&phone=' + $scope.filter.phone;  
     url += '&email=' + $scope.filter.email;  
     url +='&page=='+start+'&length='+length;  
     var promise = $http({  
       method: 'GET',  
       url: url,  
       headers: { "X-SESSION": xSession }  
     });  
     promise.success(function(data, status, headers, config){  
       if(data.code != undefined){  
         if(data.code == 1903 && data.msg == "session_expired"){  
           $cookieStore.remove("cookieXsession");  
           $state.go("homepage.login");return;  
         }else{  
           var msg = $translate.instant(data.msg);  
           notify({  
             message: msg,  
             classes: 'custom_notify',  
             templateUrl: $scope.inspiniaTemplate  
           });  
           return;  
         }  
       }  
       if(data.updated === undefined)  
         return false;  
       var records = {  
         'recordsTotal': data.updated.data.numberOfItem,  
         'recordsFiltered': data.updated.data.numberOfItem,  
         'data': data.updated.data.customerList === "[]" ? [] : data.updated.data.customerList  
       };  
       fnCallback(records);  
     });  
   }  
  $scope.customer.dtColumns = [  
    DTColumnBuilder.newColumn('userId').withTitle('userId').notVisible(),  
    DTColumnBuilder.newColumn('userId').withTitle($translate.instant('STT')).notSortable(),  
    DTColumnBuilder.newColumn('nickName').withTitle($translate.instant('User name')).notSortable().renderWith(function(data, type, full) {  
      if(data != null){  
        return data;  
      }  
      return '';  
    }),  
    DTColumnBuilder.newColumn('phone').withTitle($translate.instant('User phone')).notSortable().renderWith(function(data, type, full) {  
      if(data != null && !data.startsWith(0)){  
        return '0' + data;  
      }  
      else if(data != null) {  
        return data;  
      }  
      return '';  
    }),  
    DTColumnBuilder.newColumn('email').withTitle($translate.instant('Email')).notSortable().renderWith(function(data, type, full) {  
      if(data != null){  
        return data;  
      }  
      return '';  
    }),  
    DTColumnBuilder.newColumn('gender').withTitle($translate.instant('Gender')).notSortable().renderWith(function(data, type, full) {  
      if(data != null && data == 1){  
       return $translate.instant('Male');  
      }else if(data != null && data == 2){  
       return $translate.instant('Female');  
      }  
      return '';  
    }),  
    DTColumnBuilder.newColumn('numberOfTransaction').withTitle($translate.instant('Total transaction')).notSortable().renderWith(function(data, type, full) {  
      return data != null ? data.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;  
    }),  
    DTColumnBuilder.newColumn('toDate').withTitle($translate.instant('Average transaction')).notSortable().renderWith(function(data, type, full) {  
      var money = (data != null ? data.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0);  
      if(money != 0)  
        return money + 'đ';  
      return 0;  
    }),  
    DTColumnBuilder.newColumn('userId').withTitle($translate.instant('Detail'))  
      .notSortable().renderWith(actionsHtml)  
  ];  

    $scope.reloadData = function(){
        $scope.dtInstanceCallback.DataTable.ajax.reload();
    }