title: Load JavaScript at Runtime in AngularJS
body: <p>I have an AngularJS app. I want this app to run both in the browser and be able to distribute it with PhoneGap. In an attempt to do this, I have the following code:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript" src="/app/app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    ...
    &lt;script type="text/javascript"&gt;
      if (window.location.protocol === "file:") {
        document.addEventListener('deviceready', startApp, false);
      } else {
        startApp();
      }
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>function startApp() {
    var myApp = angular.module('myApp', ['ngRoute']);
    myApp.config(function() {
      ...
    });
  
    myApp.run(function() {
      ...
    });
  }
  </code></pre>
  
  <p>controller.js</p>
  
  <pre><code>"use strict";
  
  myApp.controller('MyController', function($rootScope, $scope, $location) {
    ...
  });
  
  myApp.controller('MyOtherController', function($rootScope, $scope, $location) {
    ...
  });
  
  ...
  </code></pre>
  
  <p>If I add controllers.js after app.js in the head tag, I get an error that says:</p>
  
  <pre><code>Uncaught ReferenceError: myApp is not defined 
  </code></pre>
  
  <p>This is happening because I'm manually bootstrapping the AngularJS app. I need to manually bootstrap it because of my need to startApp. For this reason, I need a way to dynamically load controllers.js from within startApp. Yet, I'm not sure how to do that. Can anyone provide some help? </p>
  
  <p>THank you </p>