Requirejs doesn't always load script when requested in an angular directive
<p>I'm building an application using both AngularJS and RequireJS. I've used RequireJS many times before, but this is the first time in combination with Angular.</p>

<p>I'm using a slick.js slider that is initialized via a directive. About 30% of the time, slick is undefined in introBanner.init. Slick is exported but not always available.</p>

<p><strong>RequireJS loaded</strong></p>

<pre><code>&lt;script data-main="assets/scripts/main" src="assets/scripts/vendors/bower/require.js"&gt;&lt;/script&gt;
</code></pre>

<p><strong>Main.js</strong></p>

<pre><code>requirejs(['configuration'], function () {

'use strict';

require(['jquery', 'angular', 'foundation', 'foundation-templates', 'myMainJs'], function ($, angular, foundation) {

    //this manually inits/assigns the angular module to the document so the html ng-* attributes see it
    angular.bootstrap(document, ['myMainJs']);

});

});
</code></pre>

<p><strong>configuration.js</strong></p>

<pre><code>requirejs.config({
//baseUrl: '/assets/scripts',
paths: {
    'jquery': 'vendors/bower/jquery',
    'slick': 'vendors/bower/slick',
    'angular': 'vendors/bower/angular.min',
    'angular-ui-router': 'vendors/bower/angular-ui-router.min',
    'angular-animate': 'vendors/bower/angular-animate.min'
},

shim: {
    'slick': {
        deps: ['jquery'],
        exports: 'slick'
    },
    'angular-ui-router': {
        deps: ['angular'],
        exports: 'angular'
    },
    'angular-animate': {
        deps: ['angular'],
        exports: 'angular'
    },
    'angular': {
        exports: 'angular'
    }
}
});
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="intro-banner" intro-banner&gt;
&lt;div class="slide" style="background-image: url('http://placehold.it/320x269');"&gt;
    &lt;div class="slide-content"&gt;
        &lt;h1 class="title"&gt;Lorem&lt;/h1&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="slide" style="background-image: url('http://placehold.it/320x269');"&gt;
    &lt;div class="slide-content"&gt;
        &lt;h1 class="title"&gt;Lorem&lt;/h1&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Directive</strong></p>

<pre><code>define(['jquery', 'slick'], function($, slick){

'use strict';

var introBanner = {
    init: function($elm) {

        $elm.slick({
            variableWidth: false,
            arrows: false,
            dots: true,
            autoplay: false
        });
    }
};

var introBannerDirective = function(){
    return {
        link: function(scope, elm, attrs){
            angular.element(elm).ready(function () {
                introBanner.init(elm);
            });
        }
    };
};

return introBannerDirective;

});
</code></pre>