The Angular way

You can construct your table the "angular" way, eg using the directive ng-repeat on tr tag. All you need to do is to add the directive datatable with the value ng on your table in order to make it rendered with DataTables.

Note:

The "Angular way" is REALLY less efficient than fetching the data with the Ajax/promise solutions. The lack of performance is due to the fact that Angular add the 2 way databinding to the data, where the ajax and promise solutions do not. However, you can use Angular directives (ng-click, ng-controller...) in there!

If your DataTable has a lot of rows, I STRONGLY advice you to use the Ajax solutions.

With Angular v1.3, the one time binding can help you improve performance.

If you are using angular-resource, then you must resolve the promise and then set to your $scope in order to use the one time binding.

ID FirstName LastName
{{ person.id }} {{ person.firstName }} {{ person.lastName }}
ID FirstName LastName
{{ person.id }} {{ person.firstName }} {{ person.lastName }}
angular.module('datatablesSampleApp', ['ngResource', 'datatables']).controller('AngularWayCtrl', AngularWayCtrl); function AngularWayCtrl($resource) { var vm = this; $resource('data.json').query().$promise.then(function(persons) { vm.persons = persons; }); }
ID FirstName LastName
{{ person.id }} {{ person.firstName }} {{ person.lastName }}
angular.module('datatablesSampleApp', ['ngResource', 'datatables']) .controller('AngularWayOneTimeBindingCtrl', AngularWayOneTimeBindingCtrl); function AngularWayOneTimeBindingCtrl($resource) { var vm = this; // This does not work if you want to bind once // vm.persons = $resource('data.json').query(); // This works $resource('data.json').query().$promise.then(function(persons) { vm.persons = persons; }); }

data.json 

[{ "id": 860, "firstName": "Superman", "lastName": "Yoda" }, { "id": 870, "firstName": "Foo", "lastName": "Whateveryournameis" }, { "id": 590, "firstName": "Toto", "lastName": "Titi" }, { "id": 803, "firstName": "Luke", "lastName": "Kyle" }, ... ]