title: AngularJS Controller Not Registering
body: <p>I can't seem to add a controller after I bootstrap AngularJS. The exception I get indicates that the passed controller function is not a function. However, in the Chrome debugger it shows as the expected function.</p>
  
  <p>(I realize that I am not using the declarative style of initializing AngularJS, I am exploring the framework.)</p>
  
  <p><strong>Exception</strong></p>
  
  <pre><code>Error: Argument 'MediaLoaderController' is not a function, got undefined
      at Error (&lt;anonymous&gt;)
      at $a (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:16:453)
      at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:17:56)
      at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:219)
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348
      at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
      at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
      at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
      at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
      at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324) angular.min.js:62
  (anonymous function) angular.min.js:62
  $get angular.min.js:52
  $get.e.$apply angular.min.js:88
  (anonymous function) angular.min.js:16
  d angular.min.js:27
  c angular.min.js:16
  rb angular.min.js:16
  Bootstrapper.instance.bootstrapAngularJS bootstrapper.js:19
  (anonymous function) slide_template_angularjs.jsp:20
  x.Callbacks.c jquery.js:3048
  x.Callbacks.p.fireWith jquery.js:3160
  x.extend.ready jquery.js:433
  q
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;        
          &lt;script src="/js/bootstrapper.js"&gt;&lt;/script&gt;
          &lt;script language="JavaScript"&gt;
  
              var bootstrapper = null;
              var controllerLibrary = null;
  
              $(document).ready( function(){
                  bootstrapper = new Bootstrapper();
                  controllerLibrary = new ControllerLibrary(); 
  
                  bootstrapper.bootstrapAngularJS();
                  bootstrapper.myModule.controller( "MediaLoaderController", controllerLibrary.MediaLoaderController );               
              });
              &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div ng-controller="MediaLoaderController"&gt;
              {{status}}
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function Bootstrapper() {
  
      var instance = new Object();
  
      instance.myModule = null;
      /*
       * Bootstrap AngularJS and initialize myModule
       */
      instance.bootstrapAngularJS = function() {
          instance.myModule = angular.module('myModule', []);
          angular.bootstrap(document, ['myModule']);
      };
  
      return instance;
  }
  
  
  function ControllerLibrary() {
  }
  
  ControllerLibrary.prototype.MediaLoaderController = function($scope) {
      $scope.status = "loading";
  };
  </code></pre>