Angularjs no data available in table issue

Issue

I am using angularjs data table where every time before rendering the table i receive "no data available in table" message. After the message the table shows data in the expected way.so how to fix the issue? check demo

    app.controller('myCtrl', function($scope,$http,DTOptionsBuilder, DTColumnBuilder,DTColumnDefBuilder) {

            $scope.service = service;
            $http.get('ajax/list.php').success(function(data){
            $scope.cus_list = data;      


            $scope.vm = {};


            $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('order', [0, 'asc']);
            $scope.vm.dtColumnDefs = [
                                          DTColumnDefBuilder.newColumnDef(1).notSortable()
                                      ];


    });
});

Solution

The table is rendering before the data has come back from the server. You might want to use ng-if on one of the HTML elements to wait until the data is available:

<table ng-if="userList" datatable="ng">

Edit The message you don't like has a CSS class of dataTables_empty. So maybe you can only show it with CSS if both the data has loaded and there are no rows showing in the table.

Answered By - Frank Modica