title: AngularJS & Datatable - Compile html while re-rendering the cell value
body: <p>I am using angularjs and datatable to build a grid. I have a following javascript code,</p>
  
  <p><strong>DEMO:</strong> <a href="http://plnkr.co/edit/qJ7vr1Bec5OdRrxpHw2Q?p=preview" rel="nofollow">http://plnkr.co/edit/qJ7vr1Bec5OdRrxpHw2Q?p=preview</a></p>
  
  <pre><code>datatable_config = {
       "bJQueryUI": true,
       "bProcessing": true,
       "bDeferRender": true,
       "sDom": "Rlfrtip",
       "aaData": [null]
  };
  
  angular.forEach(columns, function(column, key){
      datatable_config.aoColumns.push({
          "sTitle": column.displayName, 
          "mData": function(source, type, value){
              var cell_value = (source[column.field]) ? source[column.field] : '', rendered_cell;
              if(column.field == 'something'){
                  rendered_cell = $compile('&lt;span&gt;{{$root.value}}&lt;/span&gt;')($scope);
                   /* For this column, I am not getting the span element with the evaluated rootscope instead, it says [object object] */
              } else {
                  rendered_cell = cell_value;
              }
              return rendered_cell;
          }
      });
  });
  </code></pre>
  
  <p>When I compile the HTML, it displays <code>[object object]</code>. I am getting the problem, we need to compile it after the bind, like this <code>element.html(value); $compile(element.contents())(scope);</code>. But it is not possible in the above code. Any solution or idea?</p>
  
  <p>Thanks in advace.</p>