title: Custom Angular Datatable with cell render function
body: <p>I am creating my own data table for angular. I know there are a bunch out there to choose from, but the issue is that most of those are too feature heavy and bog down when returning a large data set. We could implement some server-side paging but it has worked well to drop our data into a bootstrap table and use the ui-bootstrap directives to give us in-browser paging. We also add excel export functionality and data filtering. I have created a directive to reduce the duplication of code for us which is working great for simple data.</p>
  
  <p>The directive takes an array of records and a column definition object in the following schema:</p>
  
  <pre><code>var columns = [
                 {title: 'Name', value: 'name', sortable: true},
                 {title: 'Address', value: 'address', sortable: true},
                 {title: 'City', value: 'city', sortable: true},
                 {title: 'State', value: 'state', sortable: true},
                 {title: 'Postal Code', value: 'zip', sortable: true}
               ];
  </code></pre>
  
  <p>Given this definition it would give you five columns named with the <em>title</em> attribute and it would expect the data for each row to look like this:</p>
  
  <pre><code>{name: 'Joe', address: '123 Main', city: 'Beverly Hills', state: 'CA', zip: 90210}
  </code></pre>
  
  <p>It would then run through each record in the data set and put the corresponding value into each field. </p>
  
  <p>My issue is that in trying to make the table more flexible I have added a "render" option to the column definition which you can provide a method which essentially returns a string that gets pushed into the cell via ng-html-bind.</p>
  
  <pre><code>render: function(data){
        return '&lt;a href="www.zipcodeLookup.com/' + data.zip + '"&gt;' + data.zip + '&lt;/a&gt;';
      }
  </code></pre>
  
  <p>This is my current implementation of the table body.</p>
  
  <pre><code>&lt;tbody&gt;
     &lt;tr ng-repeat="row in vm.getTableData(vm.options.filterText, vm.sortField, vm.sortReverse) | startFromIndex: vm.getStartingElementIndex() | limitTo: vm.options.paging.pageSize"&gt;
         &lt;td ng-repeat="column in vm.columns" ng-bind-html="vm.getCellData(row, column)"&gt;&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>I am treating the resulting string as trusted HTML so I can get things like buttons etc. Adding basic HTML is fine, but my issue arises when trying to figure out how to add in angular stuff like an ng-click event on an element in the cell. </p>
  
  <p>I have tried using the bind-html-compile directive from <a href="https://github.com/incuna/angular-bind-html-compile" rel="nofollow noreferrer">here</a>, but when I do that angular throws errors becausue of too many digest cycles. I am assuming it is because when it runs the <em>getCellData</em> function and it creates a new, although equivalent, string each time causing another digest.</p>
  
  <p>I tried making the render attribute just a template string which worked with that directive but when doing a ng-click and feeding it a function that function would have to exist on the data-table directive's controller since that is where it is getting compiled. So are there any suggestions on ways to make this work or maybe some github projects out there that are doing something similar that I can use or emulate?</p>