title: How to load controllers in AngularJS dynamically?
body: <p>I have many controllers in app and I don't want to load them upfront as the combined JS becomes very heavy.</p>
  
  <p>So I have tried following:</p>
  
  <p>In my main <code>app.js</code>, I have route defined as below:</p>
  
  <pre><code>$routeProvider.when('/myaccount', {
      templateUrl: 'my-account.html',
      title: 'My Account'
  })
  </code></pre>
  
  <p></p>
  
  <p>The <code>my-account-controller.js</code> has controller defined like:</p>
  
  <pre><code>angular.module('myApp',[]).controller('my-account', ['$scope', function($scope) { 
      $scope.greeting = 'Hola!';
  }]);
  </code></pre>
  
  <p>And finally in <code>my-account.html</code>, I have a script tag which should load the controller syncronously before using it. I am attaching that contorller with <code>ng-controller</code> directive:</p>
  
  <pre><code>script src='/assets/my-account-controller.js'
  &lt;div class="container" ng-controller='my-account'&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is somehow, Angular can not identify <code>my-account</code> as controller and it throws following error:</p>
  
  <pre><code>Error: [ng:areq] Argument 'my-account' is not a function, got undefined
  </code></pre>
  
  <p>Can someone tell me what is the missing piece?</p>