Changing data with the Angular way

It's quite simple. You just need to do it like usual, ie you just need to deal with your array of data.

 However, take in mind that when updating the array of data, the whole DataTable is completely destroyed and then rebuilt. The filter, sort, pagination, and so on... are not preserved.

ID FirstName LastName
{{ person.id }} {{ person.firstName }} {{ person.lastName }}
ID FirstName LastName
{{ person.id }} {{ person.firstName }} {{ person.lastName }}
angular.module('datatablesSampleApp', ['ngResource', 'datatables']). controller('angularWayChangeDataCtrl', function ($scope, $resource, DTOptionsBuilder, DTColumnDefBuilder) { var _buildPerson2Add = function (id) { return { id: id, firstName: 'Foo' + id, lastName: 'Bar' + id } }; $scope.persons = $resource('data1.json').query(); $scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers'); $scope.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1), DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).notSortable() ]; $scope.person2Add = _buildPerson2Add(1); $scope.addPerson = function () { $scope.persons.push(angular.copy($scope.person2Add)); $scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1); }; $scope.modifyPerson = function (index) { $scope.persons.splice(index, 1, angular.copy($scope.person2Add)) $scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1); }; $scope.removePerson = function (index) { $scope.persons.splice(index, 1); }; });

data1.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" }, ... ]