title: Angularjs delay datatable from refreshing until $http call returns
body: <p>Inside my AngularJS app I have a view with a <a href="http://www.datatables.net">JQuery datatable</a>, 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</p>
  
  <p>app.js</p>
  
  <pre><code> $stateProvider.state('app.allmembers', {
              url: '/members/members-list',
              templateUrl: 'tpl/members/membersList.html'
   })
  </code></pre>
  
  <p>Controller.js</p>
  
  <pre><code> .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 '&lt;a href="mailto:' + data + '" style=color:red;&gt;' + data + '&lt;/a&gt;';
                                         }                               
                                       },
                                       {
                                         aTargets: [ 1 ],
                                         mRender: function ( data, type, full ) {
                                           return '&lt;a href="#/app/members/update-member/' + full._id + '" style=color:blue;&gt;' + data + '&lt;/a&gt;';
                                         }                               
                                       }
                                    ]                      
                };
  
                console.log(data);
              }
          }).error(function(data,status,headers,config){
              console.log(status);
          });
  
  
  
        };
  
    }]) 
  </code></pre>
  
  <p>membersList.html</p>
  
  <pre><code>&lt;div class="wrapper-md" ng-controller="MembersListController" ng-init="getMembersList()"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-body"&gt;
                  &lt;div class="table-responsive"&gt;
                    &lt;table ui-jq="dataTable" ui-options="tbOptions" class="table table-striped m-b-none"&gt;
                      &lt;thead&gt;
                        &lt;tr&gt;
                          &lt;th  style="width:15%"&gt;Title&lt;/th&gt;
                          &lt;th  style="width:30%"&gt;First Name&lt;/th&gt;
                          &lt;th  style="width:30%"&gt;Last Name&lt;/th&gt;
                          &lt;th  style="width:25%"&gt;Email&lt;/th&gt;
                        &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;/tbody&gt;
                    &lt;/table&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>