Cannot read property 'aDataSort' of undefined in agnular js datatables

Hello everyone, I am trying to implement angular-datatables in my project but it returns "TypeError: Cannot read property ‘aDataSort’ of undefined**"

I am using Angular js version 1.4.9. Jquery version 2.1.1 DataTable version 1.10.10

Refrence site http://l-lin.github.io/angular-datatables/ Below is my code

Html <div class="col-md-12" ng-controller="WithAjaxCtrl as showCase"> <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table></div>

Angular js controller

`angular.module( 'admin.package', [
  'ui.router',
  'ui.bootstrap',
  'datatables',
  'datatables.bootstrap',
  'ngResource',
  'plusOne'
]).controller('WithAjaxCtrl', WithAjaxCtrl);

function` WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder,$http,UserService,localStorageService) {
  UserService.obj.get('packages/index',localStorageService.get('userkey').token).then(function (results) { 
    if(results.status==200){
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.fromSource(results.data.packages)
        .withPaginationType('full_numbers');
    vm.dtColumns = [
       DTColumnBuilder.newColumn('id').withTitle('id'),
        DTColumnBuilder.newColumn('package_name').withTitle('Packag Name'),
        DTColumnBuilder.newColumn('amount').withTitle('Amount'),
        DTColumnBuilder.newColumn('package_duration').withTitle('Amount'),
        DTColumnBuilder.newColumn('currency').withTitle('validity')

    ];
    console.log(vm.dtColumns);
    console.log( vm.dtOptions);
  }else{
         alert('You are not a authorized user');
      }
    }, function(reason) {
        console.log(reason);
    });
}

[l-lin]

http://l-lin.github.io/angular-datatables/#/bindAngularDirective

[l-lin]

Your table is rendered after you fetch the data. Thus, your table do not have any options, that’s why DataTables is throwing such error. Since you are rendering in two steps (one request to the server, then render the table), you need to tell the table not to render before the data is fetched. You can use the ngIf to do that:

<div class="col-md-12" ng-controller="WithAjaxCtrl as showCase">
<div ng-if="showCase.displayTable">
<table datatable
    dt-options="showCase.dtOptions"
    dt-columns="showCase.dtColumns"
    class="row-border hover"></table>
</div>
</div>

function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder,$http,UserService,localStorageService) {
    var vm = this;
    vm.displayTable = false;
  UserService.obj.get('packages/index',localStorageService.get('userkey').token).then(function (results) { 
    if(results.status==200){
    vm.dtOptions = DTOptionsBuilder.newOptions().withOption('data', results.data.packages)
        .withPaginationType('full_numbers');
    vm.dtColumns = [
       DTColumnBuilder.newColumn('id').withTitle('id'),
        DTColumnBuilder.newColumn('package_name').withTitle('Packag Name'),
        DTColumnBuilder.newColumn('amount').withTitle('Amount'),
        DTColumnBuilder.newColumn('package_duration').withTitle('Amount'),
        DTColumnBuilder.newColumn('currency').withTitle('validity')
    ];
    vm.displayTable = true;
    console.log(vm.dtColumns);
    console.log( vm.dtOptions);
  }else{
         alert('You are not a authorized user');
      }
    }, function(reason) {
        console.log(reason);
    });
}