title: How can i use Angularjs and Datatables to display data in an html table
body: <p>I have my html table as below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;table datatable="" class="table table-condensed" id="listTable"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;NAV ID&lt;/th&gt;
          &lt;th&gt;NAV DATE&lt;/th&gt;
          &lt;th&gt;DESCRIPTION&lt;/th&gt;
          &lt;th&gt;AMOUNT&lt;/th&gt;
          &lt;th&gt;ADMIN FEE&lt;/th&gt;
          &lt;th&gt;PURCHASE PRICE&lt;/th&gt;
          &lt;th&gt;POSTED BY&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr ng-repeat="navs in navs"&gt;
          &lt;td&gt;{{navs.NAV_ID}}&lt;/td&gt;
          &lt;td&gt;{{navs.NAV_DATE}}&lt;/td&gt;
          &lt;td&gt;{{navs.DESCRIPT}}&lt;/td&gt;
          &lt;td&gt;{{navs.AMOUNT}}&lt;/td&gt;
          &lt;td&gt;{{navs.ADMIN_FEE}}&lt;/td&gt;
          &lt;td&gt;{{navs.P_PRICE}}&lt;/td&gt;
          &lt;td&gt;{{navs.STAFFNAME}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>and I have the js script to render the data in my html table. How can i use datatables plugins and the js file. i use the script below too load the values into my html page. the values are loaded well but i am stuck when it comes to displaying the data in a datatable</p>
  
  <pre class="lang-js prettyprint-override"><code> angular.module('CrudApp', []).
   config(['$routeProvider',
     function($routeProvider) {
       $routeProvider.
       when('/', {
         templateUrl: 'assets/templates/list.html',
         controller: ListCtrl
       }).
       when('/addNavs', {
         templateUrl: 'assets/templates/addNewNav.html',
         controller: AddCtrl
       }).
       otherwise({
         redirectTo: '/'
       });
     }
   ]);
  
   function ListCtrl($scope, $http) {
     $http.get('api/getnavs').success(function(data) {
       $scope.navs = data;
  
     });
   }
  </code></pre>