javascript - How do I re-initialize datatables AFTER data has loaded via AJAX in AngularJS? -

i using angularjs , datatables server-side script obtain data via ajax.

my controller looks like:

var currentjobid = $stateparams.jobid; var selectedjobid = $rootscope.currentjob;  if (currentjobid !== selectedjobid) {     $rootscope.currentjob=$stateparams.jobid;     var data = {         id: $stateparams.jobid     }     $http.post('http://localhost/angular/scripts/getjob.php', data).success(function (thedata) {         $scope.job = thedata.information;         $scope.jobnotes = thedata.notes;         $scope.jobmaterialusage = thedata.materialusage;         $scope.jobitems = thedata.jobitems;         $scope.jobsubcontractorcosts = thedata.subcontractorcosts;         $scope.jobbondmisccosts = thedata.bondmisccosts;         $scope.jobemployeetime = thedata.employeetime;     }); } 

an example table looks like:

<table class="table table-striped table-hover row-links" id="employeetimetable" ui-jq="datatable" ui-options="tableoptions">     <thead>         <tr>             <th>employee name</th>             <th>total hours</th>         </tr>     </thead>     <tbody>         <tr ng-repeat="time in jobemployeetime" ng-click="gotoemployee(job.id,time.id);">             <td>{{time.name}}</td>             <td>{{time.total_minutes}}</td>         </tr>     </tbody>     <tfoot>         <tr>             <th>employee name</th>             <th>total hours</th>         </tr>     </tfoot> </table> 

so seeing if job id has changed , if has changed, makes ajax call new job info - if has not changed nothing. problem have table being initialized datatables before data loads when hit refresh. navigating away page , going initializes datatables correctly, when going directly page through url or refresh puts data @ top of table while still maintaining "no data available in table" , none of datatables functions working.

with angular ui-router resolving backend data before state controller gets called.

please have @ demo below or in jsfiddle.

it's with-out datatables that's easier part add.

(function() {  'use strict';    angular.module('demoapp', ['ui.router', 'angularspinner'])      .run(startup)      .factory('jobsdataservice', jobsdatafactory)      .config(config);    function jobsdatafactory($http) {      var backendurl = 'http://jsonplaceholder.typicode.com';            return {          get: function(id) {              return $http.jsonp(backendurl + '/posts/'+id +'?callback=json_callback')                  .then(function(response) {                      return response.data;              });          }      };  }    function config($urlrouterprovider, $stateprovider) {      $urlrouterprovider.otherwise('/jobs/1');            $stateprovider          .state('jobs',                 {                     url: '/jobs/:id',                     templateurl: 'partials/post.html',                     resolve: {                         job: function(jobsdataservice, $stateparams) {                             console.log($stateparams.id);                             return jobsdataservice.get($stateparams.id);                         }                     },                     controller: function($scope, job) {                         console.log(job);                         $scope.job = job;                     }                 });  }    function startup($rootscope){      // used loading spinner      $rootscope          .$on('$statechangestart',               function(event, tostate, toparams, fromstate, fromparams){                   $rootscope.loading = true;          });        $rootscope          .$on('$statechangesuccess',              function(event, tostate, toparams, fromstate, fromparams){                   $rootscope.loading = false;          });    }        })();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.1/spin.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.6.2/angular-spinner.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>    <div ng-app="demoapp">      <span us-spinner="" ng-if="loading"></span>      <a href="#" ui-sref='jobs({id: 1})'>job 1</a>      <a href="#" ui-sref='jobs({id: 2})'>job 2</a>      <a href="#" ui-sref='jobs({id: 3})'>job 3</a>      <div ui-view=""></div>            <script type="text/ng-template" id="partials/post.html">          <p>debug id = {{job.id}}</p>          <h1>{{job.title}}</h1>          <p>{{job.body}}</p>      </script>  </div>