title: is there a post render callback for Angular JS directive?
body: <p>I 've just gotten my directive to pull in a template to append to its element like this:</p>
  
  <pre><code># CoffeeScript
  .directive 'dashboardTable', -&gt;
    controller: lineItemIndexCtrl
    templateUrl: "&lt;%= asset_path('angular/templates/line_items/dashboard_rows.html') %&gt;"
    (scope, element, attrs) -&gt;
      element.parent('table#line_items').dataTable()
      console.log 'Just to make sure this is run'
  
  # HTML
  &lt;table id="line_items"&gt;
      &lt;tbody dashboard-table&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I am also using a jQuery Plugin called DataTables. The general usage of it is like this: $('table#some_id').dataTable(). You can pass in the JSON data into the dataTable() call to supply the table data OR you can have the data already on the page and it will do the rest.. I am doing the latter, having the rows already on the HTML page.</p>
  
  <p>But the problem is that I have to call the dataTable() on the table#line_items AFTER DOM ready. My directive above calls the dataTable() method BEFORE the template is appended to the directive's element. Is there a way that I can call functions AFTER the append?</p>
  
  <p>Thank you for your help!</p>
  
  <p>UPDATE 1 after Andy's answer:</p>
  
  <p>I want to make sure that the link method does only get called AFTER everything is on the page so I altered the directive for a little test:</p>
  
  <pre><code># CoffeeScript
  #angular.module(...)
  .directive 'dashboardTable', -&gt;
      {
        link: (scope,element,attrs) -&gt; 
          console.log 'Just to make sure this gets run'
          element.find('#sayboo').html('boo')
  
        controller: lineItemIndexCtrl
        template: "&lt;div id='sayboo'&gt;&lt;/div&gt;"
  
      }
  </code></pre>
  
  <p>And I do indeed see "boo" in the div#sayboo. </p>
  
  <p>Then I try my jquery datatable call</p>
  
  <pre><code>.directive 'dashboardTable',  -&gt;
      {
        link: (scope,element,attrs) -&gt; 
          console.log 'Just to make sure this gets run'
          element.parent('table').dataTable() # NEW LINE
  
        controller: lineItemIndexCtrl
        templateUrl: "&lt;%= asset_path('angular/templates/line_items/dashboard_rows.html') %&gt;"
      }
  </code></pre>
  
  <p>No luck there</p>
  
  <p>Then I try adding a time out :</p>
  
  <pre><code>.directive 'dashboardTable', ($timeout) -&gt;
      {
        link: (scope,element,attrs) -&gt; 
          console.log 'Just to make sure this gets run'
          $timeout -&gt; # NEW LINE
            element.parent('table').dataTable()
          ,5000
        controller: lineItemIndexCtrl
        templateUrl: "&lt;%= asset_path('angular/templates/line_items/dashboard_rows.html') %&gt;"
      }
  </code></pre>
  
  <p>And that works. So I wonder what goes wrong in the non-timer version of the code? </p>