title: Multiple directives asking for template on
body: <blockquote>
    <p>Error: [$compile:multidir] Multiple directives [statbox, statbox] asking for template on: </p>
  </blockquote>
  
  <p>(On console)</p>
  
  <p>Inside <strong>index.html</strong></p>
  
  <pre><code>&lt;script src="js/dashboard/dashboard.module.js"&gt;&lt;/script&gt;
  &lt;script src="js/dashboard/dashboard.component.js"&gt;&lt;/script&gt;
  &lt;script src="js/dashboard/statbox.component.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Inside <strong>dashboard.module.js</strong></p>
  
  <pre><code>var dashboardModule = angular.module('dashboard', ['ngRoute']);
  </code></pre>
  
  <p>Inside <strong>dashboard.component.js</strong></p>
  
  <pre><code>angular.module('dashboard').component('dashboard', {
  templateUrl: 'templates/dashboard/dashboard.template.html',
  controller: ['$scope', '$routeParams', '$http', '$rootScope', '$log', function DashboardController($scope, $routeParams, $http, $rootScope, $log) {
      ...stuff NOT REFERENCING STATBOX by any means...
  }]
  });
  </code></pre>
  
  <p>Inside <strong>statbox.component.js</strong></p>
  
  <pre><code>angular.module('dashboard').component('statbox', {
  templateUrl: 'templates/dashboard/statbox.template.html',
  controller: ['$http', '$rootScope', '$log', function StatboxController($http, $rootScope, $log) {
      ... some random get request ...
  }]
  });
  </code></pre>
  
  <p>And inside <strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('buttonMasher', ['ngRoute', 'dashboard', ...]);
  </code></pre>
  
  <p>Inside <strong>dashboard.template.html</strong></p>
  
  <pre><code>    ... stuff ...
      &lt;div id="history"&gt;
          ... stuff ...
  
          &lt;p&gt;&lt;b&gt;Statbox&lt;/b&gt;&lt;/p&gt;
          &lt;statbox&gt;&lt;/statbox&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Inside <strong>statbox.template.html</strong></p>
  
  <pre><code>&lt;div id="statbox"&gt;
  &lt;p&gt;{{$ctrl.statboxText}}&lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p>What am I doing wrong and why do I get this multiple directives error?</p>
  
  <p>Whenever I comment out <code>&lt;script src="js/dashboard/statbox.component.js"&gt;&lt;/script&gt;</code>
  from the index.html everything works but statbox controller is not getting loaded.</p>
  
  <p>(Full project is here: <a href="https://github.com/carloworks/masher" rel="noreferrer">Github: carloworks/masher</a> - One can clone and run spring with profile "dev" enabled.)</p>