title: How to detect when all directives have loaded?
body: <p>This is a spinoff of another question (<a href="https://stackoverflow.com/questions/26748657/angular-running-function-in-controller-when-all-directives-are-loaded">Angular: running function in controller when all directives are loaded</a>) as this one is general.</p>
  
  <p>How can I detect when all angular directives on a page have loaded?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The only way I found so far is by setting up a directive at the highest level which triggers a scope function during it's link function. This works as angular compiles all directives on a page from outer to inner and calls link functions from inner to outer.</p>
  
  <p>Downside: This no longer works if any of the inner directives uses a templateUrl as this will happen asynchronous. This will lead to the outer directives link function running before the inner directives link function. Additionally you'll have to add a directive to all views/includes.</p>
  
  <p><strong>EDIT2:</strong></p>
  
  <p>I found a great answer to a similar question which describes the problem above. And in the comments j_walker_dev mentions the following:</p>
  
  <pre><code>The way i got around this was to use template, like mentioned. 
  But to inject $templateCache and do template: $templateCache.get('url.tpl.html').
  </code></pre>
  
  <p>SO question: <a href="https://stackoverflow.com/questions/22081140/how-to-execute-parent-directive-before-child-directive">How to execute parent directive before child directive?</a></p>
  
  <p>At least with this once can continue using templateUrls as it avoids the asynchronous behavior of template loading in directives.</p>