title: Angularjs Nested Directive Order
body: <p>I am translating a premium HTML theme into an Angularjs application.  I have loaded up <a href="https://github.com/thenikso/angular-flexslider" rel="nofollow">angular-flexslider</a> and have that working, but the theme uses custom Jquery logic to control the layout of the slider.  </p>
  
  <p>I have created a custom directive to contain the Jquery logic and it is mostly working.  The only issue I am having is that the custom directive fires before the angular-flexslider directive and grabs the tag {{img.src}} instead of the image URL.</p>
  
  <p>I have looked up directive priority settings, but haven't had any luck with that.</p>
  
  <p>What is the correct way to force the custom directive to wait on the angular-flexslider directive to finish its DOM manipulations before executing?</p>
  
  <p>Edit:</p>
  
  <p>Below is the HTML for the flex-slider directive.  My directive (<code>flex-slide</code>) needs to apply to the <code>li</code> elements.  The directive works, but the img-src is passed as <code>{{slide.src}}</code> instead of being replaced with the URL by the flex-slider directive.  Looks like a simple parse order issue to me, but I don't know enough about Angular to figure it out.</p>
  
  <pre><code>&lt;flex-slider slider-id="home-slider" slide="slide in slides track by slide.src" direction-nav="false" animation-speed="400" added="initSlide()"&gt;
  
      &lt;li class="has-parallax cover-bg" flex-slide img-src="{{slide.src}}"&gt;
          &lt;div class="row slide-content text-center"&gt;
              &lt;div class="medium-12 medium-centered columns"&gt;
                  &lt;img class="headline-logo" alt="logo" src="assets/images/logo-white.png" /&gt;
                  &lt;div class="home-title offix"&gt;
  
                      &lt;div class="title-upper offix"&gt;
                          &lt;h6 class="left alt-h text-white"&gt;Header 1&lt;/h6&gt;
                          &lt;h6 class="right alt-h text-white"&gt;Header 2&lt;/h6&gt;
                      &lt;/div&gt;
                      &lt;h1 class="headline"&gt;Brand&lt;/h1&gt;
                      &lt;div class="title-lower"&gt;
                          &lt;p class="text-white"&gt;&lt;em&gt;Tagline&lt;/em&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="slide-overlay"&gt;&lt;/div&gt;
          &lt;img ng-src="{{slide.src}}" class="slider-bg" /&gt;
      &lt;/li&gt;&lt;!--end of individual slide--&gt;
  
  &lt;/flex-slider&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>'use strict';
  
  angular.module('app')
  .directive('flexSlide', [function () {
      return {
          restrict: "A",
          scope: {
              imgSrc:'=imgSrc'
          },
          link: function (scope, element, attr) {
              // DO JQUERY STUFF HERE with imgSrc attr
  
          }
      }
  }]
  );
  </code></pre>