title: Loading controller from partial
body: <p>I would to dynamically load controller in my partial file so my code is better organized.  Through my <a href="https://groups.google.com/forum/#!topic/angular/H4haaMePJU0" rel="nofollow noreferrer">research</a>, I found that if I want to load controller from partial using the script tag, I need to include JQuery.</p>
  
  <p>However, these approach seem to only work if my controller is declared in the global scope, i.e.</p>
  
  <pre><code>function MainCtrl($scope) {}
  </code></pre>
  
  <p>If I switch to using module in my controller.js</p>
  
  <pre><code>angular.module ("myApp").controller ("MainCtrl", function ($scope) {});
  </code></pre>
  
  <p>this no longer work with the error message 
  <strong>"Argument 'MainCtrl' is not a function, got undefined"</strong></p>
  
  <p>Below is a plunker to demonstrate this.</p>
  
  <p><a href="http://plnkr.co/wNv3UD" rel="nofollow noreferrer">http://plnkr.co/wNv3UD</a></p>
  
  <p>How could I make this work? </p>
  
  <p><strong>Note</strong>
  I did not include controller.js in index.html intentionally.  I want to load controller from the partial.html, since it would only be used there. </p>
  
  <p><strong>Edit</strong>
  I was able to achieve what I wanted to to after reading this question: <a href="https://stackoverflow.com/questions/17674945/angularjs-dynamic-loading-a-controller">AngularJS Dynamic loading a controller</a></p>
  
  <p>This seem to be a straightforward approach to support lazy loading.  Hopefully the $controllerProvider.register method could be exposed through angular.module.controller in future versions to support lazy loading.</p>