"No data available in table" still appears after rows are loaded, data disappears on column sorted

ngp130895

Hi,
I just tried to implement this great plugin to my project. It looks really awesome.
However the "No data available in table" still appears after the table data is loaded and after I tried to sort a column, all the data disappeared.
I am using Angular JS for front-end, and specifically ng-repeat to generate the rows.
How do I fix this?

HTML:

     <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>Name</th>
                <th>Slug</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="client in clients">
                <td>{{client.id;}}</td>
                <td><a href="#/client/{{client.id}}">{{client.get("name");}}</a></td>
                <td>{{client.get("slug");}}</td>
              </tr>
            </tbody>
      </table>

JS

function initDataTable(){
    $('.table').dataTable();
}

I run initDataTable() after the $scope.clients is loaded

ngp130895

DataTables doesn't support Angular JS by default. Use this:
http://l-lin.github.io/angular-datatables/