title: directive link function execution order
body: <p>I'm kind of new in all this angular...</p>
  
  <p>I have a custom directive, lets call it myDar.
  Inside this directive I define a link function.
  In my html I want to to use multiple nested tags of this directive as follows:</p>
  
  <pre><code>&lt;myDar id="outer"&gt;&lt;myDar id="inner"&gt;&lt;/myDar&gt;&lt;/myDar&gt;
  </code></pre>
  
  <p>I want the link function of "outer" to be executed first. How do I do this?</p>
  
  <p>That's the general question.
  If it helps then what I'm really trying to do is to create directives that wrap jquery ui layout (<a href="http://layout.jquery-dev.net/">link to the website</a>). So I have a directive for "ui-layout" and directives for "center", "west" etc.
  In the "ui-layout" directive I call to <code>$(tElm).layout(options)</code>. 
  I have a problem when creating a nested layout:</p>
  
  <pre><code>&lt;ui-layout class="layout-container"&gt;
      &lt;ui-layout-center&gt;
          &lt;ui-layout&gt;
              &lt;ui-layout-center&gt;inner center&lt;/ui-layout-center&gt;
              &lt;ui-layout-west&gt;inner west&lt;/ui-layout-west&gt;
          &lt;/ui-layout&gt;        
      &lt;/ui-layout-center&gt;
      &lt;ui-layout-west&gt;west&lt;/ui-layout-west&gt;
  &lt;/ui-layout&gt;
  </code></pre>
  
  <p>Angular executes first the link function of the inner "ui-layout" directive but for the jquery ui layout plugin to work it requires to call <code>$(tElm).layout(options)</code> of the outer first, otherwise the layout is not rendered correctly.</p>