unable to call function from controller in cell template in angular UI grid

Question

i am using angular Ui grid. i am using cell Template in order to render the data. previously i am using ng-repeat in cell template in order to render the data but ng -repeat causing performance issue in case of large data. so i decided to load the on demand rather than binding it during initilization phase of grid not what i done is i have a one button in my cell template on the click of that button i am creating the html template and setting the newly generated html to the one of the div in cell template using .Inner HTML property. all the html is getting render proper but now problem start here i want to call some function in my controller on the click event of my dynamically added div. but when i click the div nothing is happen and function is not getting call. here is the code .

for (var i = 0; i < data.length; i++) {
     if (data[i]) {
         var value;
         if (data[i].Value > 100) {
             value = +data[i].Value;
         } else if (data[i].Value > 0 && data[i].Value <= 100) {
             value = data[i].Value + " %";
         } else {
             value = data[i].Value;
         }
         html = html + "<div data-ng-show='row.entity.Over.length>0' style='height:25px;margin:0px' class='row' >" +
             "<div class='col-lg-6'>" + data[i].Type + " : " + data[i].line + "</div>" +
         //"<div class='col-lg-6' ><a class="+classname+"  ng-click='grid.appScope.clickHandler()'>" + value + "</a></div>"
         "<div class='col-lg-6' ><a   ng-click='grid.appScope.clickHandler()'>" + value + "</a></div>" + "</div>";
         $compile((html)($scope));
     }
 }

Please help me on this issue.