Angular JS click event is not working in wijgrid colum

Question

I am using wijgrid component in angular js there I got the problem that unable to perform click events on it.in wijgrid html components are not compiled , find the html code

<wij-grid  id = "dataGrid" allow-sorting="true" data="data" columns-autogeneration-mode="none" allow-paging="true" >
  <columns>
     <column data-key="name" header-text="Name"></column>
     <column data-key="address" header-text="Address" ></column>
     <column data-key="submit" header-text="Submit"></column>
   </columns>
</wij-grid>     

and my angular js code

$http.get(url,data).success(
        loadData);  

function loadData(responseData) {
if (responseData != null) {
    var data = responseData;
    for (index = 0; index < data.length; index++) {
        data[index].address =   data[index].addressLineOne+","+data[index].addressLineTwo;                                  
        $SubmitBtn  = "<a href='javascript:void(0);ng-click='submitCode("+data[index].reviewId+",true)'>Approve</a>";   data[index].submit=$ASubmitBtn;                                     
    }
    $scope.data = data;
    $("#content").wijtabs();
  }
}    
$scope.submitCode= function(id, status) {
alert(id+" "+status)
} 

HERE submit code function is not calling and in view source the function is showing with id and status.. which means it is not compiling in wijgrid module please help me to provide the solution. I tried to compile code $compile($sumitBtn)($scope) but it doesnt works , please suggest me s0lution

Answer 1

I got the solution using cellformatter method there i changed the code according to my requirement

$scope.formatter = function(args) {
if(args.row.dataRowIndex < 0 ) 
return false;
args.$container
.html($compile(
args.formattedValue)
($scope));
return true;    
}   

Answer 2

Wijmo is aware of this issue and says it's a known bug. The workaround I'm using is this:

  $scope.cellStyleFormatter = function(args) {
  if ((args.row.type & wijmo.grid.rowType.data) && (args.row.state & wijmo.grid.renderState.rendering)) {
        var content = args.$cell[0].innerHTML;
        //Here I have button html already in my grid data, using 
        //'my-link-class' css
        if(content.indexOf("my-link-class") > -1) {
            var scope = angular.element("#grid-container").scope();
            args.$cell
                .empty()
                .append($(content).click(function () {
                    scope.myControllerClickHandler();
                })
            );
        }
        return true;
    }
    };

And I declare my grid like so:

    <wij-grid  data="template.model.content" allow-editing="false" cellStyleFormatter="cellStyleFormatter">
      <columns>
        <column dataKey="col_0" ></column>
      </columns>
    </wij-grid>

I am using cellStyleFormatter above because I can apply it globally to the whole grid. You can use cellFormatter if you know the column ahead of time (my application has variable number of columns so this wasn't an option for me). You would reference args.container instead of args.$cell if using cellFormatter.

Here is a link to wijmo's explanation: http://wijmo.com/topic/wig-grid-with-angularjs-how-to-handle-click-on-a-link-in-a-cell/