title: Requirejs dependency not working
body: <p>I am trying to use <a href="https://github.com/remotty/angular-ladda" rel="nofollow">angular-ladda</a> directive in my app. Here is my main.js which is the requirejs manifesto file:</p>
  
  <pre><code>requirejs.config({
  
      paths: {
          underscore: 'lib/underscore/underscore',
          angular: 'lib/angular/angular',
          jquery: 'lib/jquery/dist/jquery.min',
          'angular-route': 'lib/angular-route/angular-route',
          'controllers': 'js/controllers',
          'services': 'js/services',
          'providers': 'js/providers',
          'filters': 'js/filters',
          'directives': 'js/directives',
          'app': 'js/app',
          'spin': 'lib/ladda/dist/spin.min',
          'ladda': 'lib/ladda/js/ladda', 
          'ngLadda': 'lib/angular-ladda/src/angular-ladda'
  
      },
  
      shim: {
          underscore: {
              exports: '_'
          },
          'angular': {
              exports: 'angular'
          },
          'states': {
              deps: ['angular'],
              exports: 'states'
          },
          'angular-route': {
              deps: ['angular']
          },
          'ladda': {
              deps: ['spin'],
              exports: 'Ladda'
          },
          'ngLadda': {
              deps: ['ladda']
          }
      },
      priority: [
          'angular'
      ]
  });
  
  requirejs(['angular',
              'app',
              'underscore',
              'js/routes',
              'jquery',
              'services/services',
              'providers/providers',
              'directives/directives',
              'filters/filters',
              'controllers/controllers',
              'ngLadda'
  
             ], function (angular, app, _) {
                 angular.element(document).ready(function () {
                     angular.bootstrap(document, ['App']);
                     document.getElementsByTagName('html')[0].dataset.ngApp = 'App';
                 });
  
             });
  </code></pre>
  
  <p>Here is the ladda directive:</p>
  
  <pre><code>/**!
   * AngularJS Ladda directive
   * @author Chungsub Kim &lt;subicura@subicura.com&gt;
   */
  
  /* global Ladda */
  (function () {
    'use strict';
  
    angular.module('angular-ladda', []).directive(
      'ladda',
      [
        '$compile',
        function ($compile) {
          return {
            restrict: 'A',
            link: function (scope, element, attrs) {
              element.addClass('ladda-button');
              if(angular.isUndefined(element.attr('data-style'))) {
                element.attr('data-style', 'zoom-in');
              }
  
  
              var ladda = Ladda.create( element[0] ); //here is were Ladda is not defined
              $compile(angular.element(element.children()[0]).contents())(scope);
  
              scope.$watch(attrs.ladda, function(loading) {
                if(loading || angular.isNumber(loading)) {
                  if(!ladda.isLoading()) {
                    ladda.start();
                  }
                  if(angular.isNumber(loading)) {
                    ladda.setProgress(loading);
                  }
                } else {
                  ladda.stop();
                }
              });
            }
          };
        }
      ]
    );
  })();
  </code></pre>
  
  <p>In the directive code (line 22, where commented) there is an erroe "Ladda is not defined".<br>
  If I will add the following line:</p>
  
  <pre><code>var Ladda = require('ladda');
  </code></pre>
  
  <p>It all will work, so why the dependency in the main.js not doing this already?</p>
  
  <p>Can you please help me with this one?</p>