title: Nested directive life-cycle not executing in expected order when using $compile and adding to the DOM for the first time
body: <h1>What I'm trying to do</h1>
  
  <p>I have the following directive structure:</p>
  
  <pre><code>&lt;dashboard&gt;
      &lt;widget&gt;
          &lt;timer&gt;&lt;/timer&gt;
      &lt;/widget&gt;
      &lt;widget&gt;
          &lt;chronometer&gt;&lt;/chronometer&gt;
      &lt;/widget&gt;
  &lt;/dashboard&gt;
  </code></pre>
  
  <p>Where <code>dashboard</code>, <code>widget</code>, <code>timer</code>, and <code>chronometer</code> are all custom directives that I've written.</p>
  
  <p>The basic idea is that I want the <code>dashboard</code> directive to keep track of all the <code>widgets</code> that it has. When a <code>widget</code> is <code>$compile</code>d and added to the DOM from the <code>dashboard</code>, it automatically adds itself to the <code>dashboard</code> by calling an <code>addWidget(widget)</code> method from the <code>widget</code>'s <code>link</code> function, which is exposed by the <code>dashboard</code>'s controller.</p>
  
  <p>The <code>widget</code> directive knows how to minimize itself, close itself, set its title, etc., and it too has a <code>register</code> method on its <code>controller</code> that takes in widget metadata information (e.g., the name and version of a widget).</p>
  
  <p>The <code>timer</code> and <code>chronometer</code> widgets then require <code>widget</code> and call the <code>register({name: 'timer', version: '0.1'})' which exists in the</code>widget`'s controller function.</p>
  
  <p>Finally, there is an <code>addWidget()</code> method in the <code>dashboard</code>'s <code>link</code> function which allows users to add the <code>timer</code> and <code>chronometer</code> widgets to the dashboard.</p>
  
  <p>For this example, I'm going to assume we just want to add the <code>timer</code> directive to the dashboard:</p>
  
  <pre><code>// dashboard.directive.js
  
  function link($scope, $elem, $attrs) {
      $scope.addWidget = function () {
          var widget = $compile('&lt;widget&gt;&lt;timer&gt;&lt;/timer&gt;&lt;/widget&gt;')($scope);
          angular.element($elem[0].querySelector('.widget-container')).append(widget);
      }
  }
  </code></pre>
  
  <p>When the <code>$addWidget</code> function is called, the timer widget is successfully added to the dashboard, I can start/stop/reset the timer, and the <code>widget</code> directive registers the <code>timer</code> directive, and then the <code>widget</code> directive registers itself with the <code>dashboard</code> directive. I've 100% confirmed that this is working perfectly.</p>
  
  <h1>Directive life-cycle: what I'm expecting</h1>
  
  <p>As a reminder, here's how the DOM looks like:</p>
  
  <pre><code>&lt;dashboard&gt; &lt;!-- the dashboard already exists on initial bootstrap --&gt;
      &lt;widget&gt; &lt;!-- the widget and timer are added dynamically by the dashboard --&gt;
          &lt;timer&gt;&lt;/timer&gt;
      &lt;/widget&gt;
      &lt;widget&gt; &lt;!-- the widget and chronometer are added dynamically by the dashboard --&gt;
          &lt;chronometer&gt;&lt;/chronometer&gt;
      &lt;/widget&gt;
  &lt;/dashboard&gt;
  </code></pre>
  
  <p>From what I understand of Angular directives' life-cycle, the directives should be constructed as follows:</p>
  
  <pre><code>dashboard controller() called
  dashboard link() called
  
  widget controller() called
    timer controller() called
    timer link() called
  widget link() called
  </code></pre>
  
  <p>Where the widget and timer are added to the DOM within the <code>dashboard</code> as described in the <code>dashboard.directive.js</code> snippet above.</p>
  
  <h1>Directive life-cycle: what I'm getting (sometimes)</h1>
  
  <p><strong>However, sometimes when I add the timer to the dashboard for the first time, this is not the case</strong>. After I added a bunch of <code>console.log</code> statements inside the <code>controller</code> and <code>link</code> functions for the <code>dashboard</code>, <code>widget</code> and <code>timer</code> directives, however, I found that the directives are sometimes being constructed in this order:</p>
  
  <pre><code>dashboard controller() called
  dashboard link() called
  
  // Why is this happening:
  
    widget controller() called
    widget link() called
  
    timer controller() called
    timer link() called
  </code></pre>
  
  <p>What's even more puzzling is that this seemingly out-of-order composing only happens the first time I add the widget to the DOM. The second time I add the same widget, everything happens in the correct order.</p>
  
  <p>What am I doing wrong? I'm using Angular 1.2.26 (I am required to use that version, unfortunately). Thanks for the help :)</p>