title: AngularJS - dynamic loading of external JS based on routes
body: <p>I am trying to make a simple single page mobile app with multiple views and a next\back button to control each view. I am using the Angular Mobile UI library.</p>
  
  <p>The basic mockup is as follows:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css"&gt;
          &lt;link rel="stylesheet" href="mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css"&gt;
  
          &lt;script src="js/angular/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/angular/angular-route.min.js"&gt;&lt;/script&gt;
          &lt;script src="mobile-angular-ui/dist/js/mobile-angular-ui.min.js"&gt;&lt;/script&gt;
  
          &lt;script src="app/app.js"&gt;&lt;/script&gt;
          &lt;script src="app/firstController.js"&gt;&lt;/script&gt;
          &lt;script src="app/secondController.js"&gt;&lt;/script&gt;
          &lt;script src="app/thirdController.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body ng-app="demo-app"&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
  
          &lt;div ng-controller="nextBackController" class="navbar navbar-app navbar-absolute-bottom"&gt;
              &lt;div class="btn-group justified"&gt;
                &lt;a href="#/" class="btn btn-navbar btn-icon-only"&gt;&lt;i class="fa fa-home fa-navbar"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a href="#/second" class="btn btn-navbar btn-icon-only"&gt;&lt;i class="fa fa-list fa-navbar"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>App.js is as follows:</p>
  
  <pre><code>var app = angular.module('demo-app', [
    "ngRoute",
    "mobile-angular-ui"
  ]);
  
  app.config(function($routeProvider) {
    $routeProvider.when('/', { controller: "firstController",
                               templateUrl: "views/first.html"});
    $routeProvider.when('/', { controller: "secondController",
                               templateUrl: "views/first.html"});
    $routeProvider.when('/', { controller: "thirdController",
                               templateUrl: "views/first.html"});
  });
  
  controllers = {};
  
  controllers.nextBackController = function($scope, $rootScope) {
      //Simple controller for the next, back buttons so we just put it in app.js
  };
  
  app.controller(controllers);
  </code></pre>
  
  <p>firstController.js will contain something similar to:</p>
  
  <pre><code>controllers.firstController = function($scope) {
      //Do our logic here!!!
  };
  </code></pre>
  
  <p>The problem is if you notice at the top of the HTML page I have to load all the controllers in.  This is not scalable.  I want each controller to be in it's own JS file and not have to statically load each one since the user may never even require that controller.  Is there a way to dynamically load the actual JS file when switching routes?  or can I stick a script tag at the top of my "first.html", "second.html", etc.</p>