Angularjs Nested Directive Order

Question

I am translating a premium HTML theme into an Angularjs application. I have loaded up angular-flexslider and have that working, but the theme uses custom Jquery logic to control the layout of the slider.

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.

I have looked up directive priority settings, but haven't had any luck with that.

What is the correct way to force the custom directive to wait on the angular-flexslider directive to finish its DOM manipulations before executing?

Edit:

Below is the HTML for the flex-slider directive. My directive (flex-slide) needs to apply to the li elements. The directive works, but the img-src is passed as {{slide.src}} 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.

<flex-slider slider-id="home-slider" slide="slide in slides track by slide.src" direction-nav="false" animation-speed="400" added="initSlide()">

    <li class="has-parallax cover-bg" flex-slide img-src="{{slide.src}}">
        <div class="row slide-content text-center">
            <div class="medium-12 medium-centered columns">
                <img class="headline-logo" alt="logo" src="assets/images/logo-white.png" />
                <div class="home-title offix">

                    <div class="title-upper offix">
                        <h6 class="left alt-h text-white">Header 1</h6>
                        <h6 class="right alt-h text-white">Header 2</h6>
                    </div>
                    <h1 class="headline">Brand</h1>
                    <div class="title-lower">
                        <p class="text-white"><em>Tagline</em></p>
                    </div>
                </div>

            </div>
        </div>
        <div class="slide-overlay"></div>
        <img ng-src="{{slide.src}}" class="slider-bg" />
    </li><!--end of individual slide-->

</flex-slider>

Directive:

'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

        }
    }
}]
);

Answer 1

I finally realized that the directive will have access to the parent scope. Since the angular-flexslider directive functions as a loop, I can directly access the scope variables from the loop in my custom directive like below.

'use strict';

angular.module('perspectiveUas')
    .directive('flexSlide', [function () {
        return {
            restrict: "A",
            link: function (scope, element, attr) {

               // DO JQUERY STUFF HERE
               // $scope.slide is available from parent scope.

            }
        }
    }]
);