ng-click not working with Datatable and Angular Js - angularjs

Question

I have read several similar questions but none worked for me on this issue. I am using laravel-datatable with angular js. But 'ng-click' does not work with the dynamically generated datatable buttons. I read about $compile but dont know how to implement it with the table. Am very new to angular js.
When I click on the button nothing happens.
app.controller('myController', ['$scope','$compile', function($scope, $compile) {
$('#stafftbl').DataTable( {
paging: true,
"ordering": true,
"searching": true,
"bInfo" : true,
deferRender: true,
ajax: 'get_staffsalary',
columns: [
{ data: 'staff_num', name: 'staff_num'},
{ data: 'staffname ', name: 'staffname' },
{ data: 'salary', name: 'salary' },
{ data: 'date_effected', name: 'date_effected' },
{ data: 'updated_at', name: 'updated_at' },
{ data: null, render: function (data, type, full) {
return '<button class="btn btn-xs btn-primary" ng-click="update('+full.id+')">Update Salary</button> ';
}},
],
});
$scope.update= function (id) {
alert(id)
}
}]);
Please any help with this?

Answer 1

Yes, you are correct in that you need to use $compile.
After dynamically adding html with angular attributes in it, like you are with your data table, you must call $compile so that angular can pick up the attributes.
You'll need to inject the $compile service into your controller right after $scope. Then, after the HTML has been added you will need to compile the new DOM and link it to the scope by calling $compile(new_html)($scope) in the context of your controller.
Refer to the $compile doco for reference

Answer 2

I solved it using #MJL 's answer. Here is the full block of code, it may hep someone else
app.controller('myCtrl', ['$scope','$compile', function($scope, $compile) {
var table = $('#stafftbl').DataTable( {
processing: false,
serverSide: false,
deferRender: true,
ajax: 'get_staffsalary',
columns: [
{ data: 'staff_num', name: 'staff_num'},
{ data: 'salary', name: 'salary' },
{ data: 'date_effected', name: 'date_effected' },
{ data: 'updated_at', name: 'updated_at' },
{ data: null, render: function (data, type, full) {
return '<button class="btn btn-xs btn-primary text-size-small" ng-click="clickme()>Update</button> ';
}},
],
"createdRow": function ( row, data, index ) {
$compile(row)($scope); //add this to compile the DOM
}
})
$scope.clickme = function () {
alert('clicked me')
}
}]);