title: How to execute parent directive before child directive?
body: <p>I'm looking to write two angular directives, a parent and a child directive, to create sortable and cloneable widgets. The intended markup is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="widget-container" data-sortable-widgets&gt;
        &lt;section class="widget" data-cloneable-widget&gt;&lt;/section&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>However, the child directive seems to execute before the parent, before a certain element is available (its added by the parent):</p>
  
  <pre class="lang-js prettyprint-override"><code>function SortableWidgetsDirective() {
      return {
          priority: 200,
          restrict: 'A',
          link: function ($scope, element, attrs) {
              element.find(".widget header").append($("&lt;div class='widget-controls'&gt;&lt;/div&gt;"));
              element.sortable({  });
          }
      };
  }
  
  function CloneableWidgetDirective() {
      return {
          priority: 100,
          restrict: 'A',
          link: function ($scope, element, attrs) {
              // This directive wrongfully executes first so widget-controls is no available
              element.find("header .widget-controls").append($("&lt;div class='clone-handle'&gt;&lt;/div&gt;"));
          }
      };
  }
  </code></pre>
  
  <p>As you can see i tried setting priority but I think because they're on different elements, it does not work.</p>
  
  <p>How can I make the parent execute first?</p>