title: JQuery Datatable in Angular Js Ng-Click not Working?
body: <p>I have a DataTable and I am loading it using Angular Js, I have Created a directive and wrapped my DataTable in this directive, A common approach of wraping  JQuery Plugin in Directive so that it can live in <code>Angular Digest Cycle</code>.
  But the <code>ng-click</code> that is on button and coming from <code>render Function of column</code> in datatable is not <code>clickable</code> (Not Working, Angular did not compiled it). Is there any way to make it <code>Clickable</code>. I know the approach in which we use <code>{{}} with ng-repeat</code>to populate data in datatable. I'm looking a <code>directive way</code>, so you can tell me what is stoping ng-click from working or how to make my directive right! Please stick with directive approach. Code is following.</p>
  
  <pre class="lang-js prettyprint-override"><code>App.directive('jqtable', function () {
  return {
      restrict: 'E, A, C',
      link: function (scope, element, attrs, controller) {
          var dataTable = element.dataTable(scope.options);
           scope.$watch('options.data',  handleModelUpdates, true);
              function handleModelUpdates(newData) {
              var data = newData || null;
              if (data) {
                  dataTable.fnClearTable();
                  dataTable.fnAddData(data);
              }
          }
      },
      scope: {
          options: "="
      }
  };
  </code></pre>
  
  <p>});</p>
  
  <p>And here is my Controller:-</p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.options = {
     aoColumnDefs: [{
          "bSortable": true,
          "aTargets": [ 1],
          "render": function ( data, type, full, meta ) {
              if(meta.col==1){
                  return data+" &lt;a class='btn btn-sm btn-default' ng-click='showalert()' &gt;Click me &lt;/a&gt;"
              }
          }
      }],
      bJQueryUI: true,
      bDestroy: true,
      data:$scope.data                        
  };
  $scope.showalert=()=&gt;
  {
      alert("Angular Compiled the Html");
  }
  </code></pre>