Javascript injected ng-click function didn't fire

Question

I am using this bootstrap libary for our server side tables and having some problem in firing the injected JS function.

The library allows you to use the "data-formatter" to inject/format the html and we are using that formatter to edit/delete or other action for rows but our functions are all in AngularJS and seems like the injected HTML is not compiled and the ng-click function in scope is not firing.

Here is the code below and I created a JSFiddle as well to better demonstrate the issue. I'd prefer the app.directive solution to better re-use in our application, if any exists or other workaround? thanks.

HTML

<div ng-app="myApp" ng-controller="myCtrl">

<button class="btn btn-default" ng-click="test(0)">
This works
</button>

<table data-toggle="table"
       data-show-print="true"
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-formatter="Action">Action</th> 
    </tr>
    </thead>
</table>
</div>

JavaScript/AngularJS

function Action(value, row){
    var html = '<a ng-click="click(1)" href="#">Click me</a>';
  return html;
}

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

    $scope.click = function(args){
        alert(args);
    }   

    $scope.test = function(args){
        alert(args);
    }   

});

Answer 1

you can fix the issue with small workaround by using javascript onClick & call controller click function (as ng-click is not recognized inside data-formatter).

code:

function Action(value, row){
    var html = '<a onClick="angular.element(this).scope().click(row)" href="#">Click me</a>';
  return html;
}