Angularjs delay datatable from refreshing until $http call returns

Question

Inside my AngularJS app I have a view with a JQuery datatable, controller to manage data loaded in the datatable as shown below. When refreshing the view, data is loaded without a problem in the datatable, but if I change route to another view then returned back to the view with datatable I get message (No data available in table)...after tracing the issue I found that this happens because the datatable is loaded before the $http call returns. I've tried adding naif on the div containing the datatable to prevent showing it unless there is data returned but no luck as it worked only first time I load the page (by refresh) but wouldn't work on route change. Can someone please tell me what exactly I am doing wrong here and how to resolve this issue? Thanks

app.js

 $stateProvider.state('app.allmembers', {
            url: '/members/members-list',
            templateUrl: 'tpl/members/membersList.html'
 })

Controller.js

 .controller('MembersListController', ['$scope', '$http', 'GlobalService', function($scope, $http, GlobalService) {

      $scope.dset = []; 

      $scope.getMembersList = function() {

        var memURL = 'http://localhost:3000/apiserv/members/';

        $http({ method:'GET',
                url: memURL,
                headers: { 'Content-Type' : 'application/json'
                }                  
             })
        .success(function(data,status,headers,config){
              $scope.dset = data;

              $scope.tbOptions = {
                                  data: $scope.dset,
                                  aoColumns: [
                                    { mData: 'title' },
                                    { mData: 'firstName' },
                                    { mData: 'lastName' },
                                    { mData: 'email' }                          
                                  ],
                                  aoColumnDefs: [  
                                     {
                                       aTargets: [ 3 ],
                                       mRender: function ( data, type, full ) {
                                         return '<a href="mailto:' + data + '" style=color:red;>' + data + '</a>';
                                       }                               
                                     },
                                     {
                                       aTargets: [ 1 ],
                                       mRender: function ( data, type, full ) {
                                         return '<a href="#/app/members/update-member/' + full._id + '" style=color:blue;>' + data + '</a>';
                                       }                               
                                     }
                                  ]                      
              };

              console.log(data);
            }
        }).error(function(data,status,headers,config){
            console.log(status);
        });



      };

  }]) 

membersList.html

<div class="wrapper-md" ng-controller="MembersListController" ng-init="getMembersList()">
  <div class="row">
    <div class="col-sm-10">
      <div class="panel panel-default">
        <div class="panel-body">
                <div class="table-responsive">
                  <table ui-jq="dataTable" ui-options="tbOptions" class="table table-striped m-b-none">
                    <thead>
                      <tr>
                        <th  style="width:15%">Title</th>
                        <th  style="width:30%">First Name</th>
                        <th  style="width:30%">Last Name</th>
                        <th  style="width:25%">Email</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

You can use Angular directive for Jquery Datatable instead of using other options. It will be good for adding features in Angular way.

URL: http://l-lin.github.io/angular-datatables/

Please check the following example which will help you to complete your task.

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

Also, please check the following API for matching your configurations

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

Working Demo: http://plnkr.co/edit/fxkaowyvkyIgRNAgcClI?p=preview

Note: The above demo combined with ui-router module. So I believe it will solve your problem.