# Binding Angular directive to the DataTable

If you are not using the Angular way of rendering your DataTable, but you want to be able to add Angular directives in your DataTable, you can do it by recompiling your DataTable after its initialization is over.

<tabset>

{{ message }}

{{ message }}

angular.module('datatablesSampleApp'). controller('bindAngularDirectiveCtrl', function ($scope, $compile, DTOptionsBuilder, DTColumnBuilder) { $scope.message = ''; $scope.edit = function(id) { $scope.message = 'You are trying to edit the row with ID: ' + id; // Edit some data and call server to make changes... // Then reload the data so that DT is refreshed $scope.dtOptions.reloadData(); }; $scope.delete = function(id) { $scope.message = 'You are trying to remove the row with ID: ' + id; // Delete some data and call server to make changes... // Then reload the data so that DT is refreshed $scope.dtOptions.reloadData(); }; $scope.dtOptions = DTOptionsBuilder.fromSource('data1.json') .withPaginationType('full_numbers') .withOption('createdRow', function(row, data, dataIndex) { // Recompiling so we can bind Angular directive to the DT $compile(angular.element(row).contents())($scope); }); $scope.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name'), DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable() .renderWith(function(data, type, full, meta) { return '
' + '
'; }) ]; });
</tabset>