Edit and deleteRow functions in code not called when button clicked - angularjs

Question

I am population angular-datatable using server side response . Issue is i am not able to call the function in html added through renderWith(actionsHtml).
var vm = this;
vm.edit = edit;
vm.deleteRow = deleteRow;
var draw = 0;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('serverSide', true)
.withOption('ajax', function(data, callback, settings) {
// make an ajax request using data.start and data.length
$http.post('/getProduct/api/call', {
draw: draw,
store_id: Session.sessionuserid(),
limit: data.length,
offset: data.start,
contains: data.search.value
}).success(function(res) {
// map your server's response to the DataTables format and pass it to
// DataTables' callback
draw = res.draw;
callback({
recordsTotal: res.meta,
recordsFiltered: res.meta,
draw: res.draw,
data: res.data
});
});
}).withDataProp('data');
vm.dtColumns = [
DTColumnBuilder.newColumn('name').withTitle('PRODUCT NAME'),
DTColumnBuilder.newColumn('price').withTitle('PRICE'),
DTColumnBuilder.newColumn('offer_flag').withTitle('Weekly Special'),
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
.renderWith(actionsHtml)
];
function actionsHtml(data, type, full, meta) {
return '<button class="btn btn-warning" ng-click="showCase.edit(' + data.id + ')">' +
' <i class="fa fa-edit"></i>' +
'</button> ' +
'<button class="btn btn-danger" ng-click="showCase.deleteRow(' + data.id + ')">' +
' <i class="fa fa-trash-o"></i>' +
'</button>';
}
These functions are not called when buttons pressed
function edit(id) {
console.log(id);
TempStore.addID(id);
$location.path('/editproduct');
}
function deleteRow(id) {
var msgbox = $dialog.messageBox('Delete Product', 'Are you sure?', [{label: 'Yes, I\'m sure', result: 'yes'}, {label: 'Nope', result: 'no'}]);
msgbox.open().then(function(result) {
if (result === 'yes') {
$scope.removeproduct = Restdata.remove({sailsModel: 'products', id: id}, function() {
$window.location.reload();
});
}
});
}
;
Here is my HTML :

Answer 1

After your DataTable is rendered, you need to recompile with $compile in order to bind your $scope and angular directives to the produces HTML:
vm.dtOptions = DTOptions.newOptions()
.withOption('createdRow', createdRow)
... // other options
function createdRow(row, data, dataIndex) {
// Recompiling so we can bind Angular directive to the DT
$compile(angular.element(row).contents())($scope);
}
See the documentation on how to bind angular directives.