title: Angularjs Multiple Directives Asking For Transclusion when lazy loading
body: <p>I'm trying to setup a simple angularjs app using <a href="https://github.com/angular-ui/ui-router" rel="nofollow">ui.router</a>, <a href="https://github.com/ocombe/ocLazyLoad" rel="nofollow">ocLazyLoad</a>, <a href="http://foundation.zurb.com/" rel="nofollow">Foundation</a> and <a href="http://pineconellc.github.io/angular-foundation/" rel="nofollow">angular-foundation</a>.</p>
  
  <p>The app is a multi-view app with it's components lazy loaded using <a href="https://github.com/ocombe/ocLazyLoad" rel="nofollow">ocLazyLoad</a>.  I have no problem setting up the views and associated controllers.  However, I am having an issue when trying to display a Foundation alert.  When I try to view my alerts (route1), I get empty alerts.  And the stack trace below.</p>
  
  <p>Why is angular applying the alert directive twice?  A plunker is available here: <a href="http://goo.gl/lhtD0c" rel="nofollow">http://goo.gl/lhtD0c</a></p>
  
  <pre><code>Error: [$compile:multidir] Multiple directives [alert, alert] asking for transclusion on:        
  &lt;div class="alert-box" ng-class="(type || &amp;quot;&amp;quot;)" ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"&gt;
  http://errors.angularjs.org/1.2.22/$compile/multidir?p0=alert&amp;p1=alert&amp;p2=t…lerts%22%20type%3D%22alert.type%22%20close%3D%22closeAlert(%24index)%22%3E
  at https://code.angularjs.org/1.2.22/angular.js:78:12
  at assertNoDuplicate (https://code.angularjs.org/1.2.22/angular.js:6933:15)
  at applyDirectivesToNode (https://code.angularjs.org/1.2.22/angular.js:6353:13)
  at https://code.angularjs.org/1.2.22/angular.js:6858:37
  at https://code.angularjs.org/1.2.22/angular.js:8091:11
  at wrappedCallback (https://code.angularjs.org/1.2.22/angular.js:11546:81)
  at wrappedCallback (https://code.angularjs.org/1.2.22/angular.js:11546:81)
  at https://code.angularjs.org/1.2.22/angular.js:11632:26
  at Scope.$eval (https://code.angularjs.org/1.2.22/angular.js:12658:28)
  at Scope.$digest (https://code.angularjs.org/1.2.22/angular.js:12470:31)
  </code></pre>
  
  <p>The body of my index is below:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt;
          &lt;a class="button" ui-sref="route1"&gt;Route 1&lt;/a&gt;
          &lt;a class="button" ui-sref="route2"&gt;Route 2&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div ui-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The javascript associated with this page is:</p>
  
  <pre><code>var myapp = angular.module('myapp', ['ui.router', 'oc.lazyLoad', 'mm.foundation'])
  
  myapp.config(function($stateProvider, $urlRouterProvider){
  
    // For any unmatched url, send to /route2
    $urlRouterProvider.otherwise('/route2')
  
    $stateProvider
      .state('route1', {
          url: "/route1",
          controller: 'Route1',
          templateUrl: "route1.html",
          resolve: {
              loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: 'myapp',
                      files: ['route1.js']
                  })
              }]
          }
      })
      .state('route2', {
          url: "/route2",
          templateUrl: "route2.html"
      })
  });
  
  $(function() {
      Foundation.global.namespace = '';
      $(document).foundation();
  })
  </code></pre>
  
  <p>The problems are associated with route1.  Here is the route1 template.</p>
  
  <pre><code>&lt;div ng-controller="Route1"&gt;
      Route 1 - {{ message }}
  
      &lt;br/&gt;
  
      &lt;alert ng-repeat="alert in alerts"
             type="alert.type"
             close="closeAlert($index)"&gt;{{alert.msg}}&lt;/alert&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and finally the route1.js -</p>
  
  <pre><code>angular.module('myapp').controller('Route1', ['$scope', function($scope) {
      $scope.message = 'Hello, world!'
  
      $scope.alerts = [
          { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
          { type: 'success round', msg: 'Well done! You successfully read this important alert message.' }
      ];
  
  }]);
  </code></pre>