title: How can I run a directive after the dom has finished rendering?
body: <p>I've got a seemingly simple problem with no apparent <em>(by reading the Angular JS docs)</em> solution.</p>
  
  <p>I have got an Angular JS directive that does some calculations based on other DOM elements' height to define the height of a container in the DOM.</p>
  
  <p>Something similar to this is going on inside the directive:</p>
  
  <pre><code>return function(scope, element, attrs) {
      $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
  }
  </code></pre>
  
  <p>The issue is that when the directive runs, <code>$('site-header')</code> cannot be found, returning an empty array instead of the jQuery wrapped DOM element I need.</p>
  
  <p>Is there a callback that I can use within my directive that only runs after the DOM has been loaded and I can access other DOM elements via the normal jQuery selector style queries?</p>