title: A controller with this name is not registered
body: <p>I am working through some Angular examples and got an interesting exception-scenario &amp; was wondering why it happens.</p>
  
  <p><strong>The Scenario:</strong><br/></p>
  
  <p>IT FAILS
   - When I create my controller in a <code>$(document)ready(function{ ... })</code> block</p>
  
  <p>IT WORKS
   - When I create my controller outright</p>
  
  <p><strong>Why?</strong>
  I'm sure your not supposed to bring-in jQuery like this, but still, why does it fail?</p>
  
  <p><strong>In The Head:</strong><br/></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          var appName = 'personal.web';
          var application = angular.module(appName, ['ngRoute']);
  
          application.config(function ($httpProvider, $routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $locationProvider) {
  
              // REQUIRED: Enables "late" registration
              application.register = {
                  controller: $controllerProvider.register,
                  directive: $compileProvider.directive,
                  filter: $filterProvider.register,
                  factory: $provide.factory,
                  service: $provide.service
              };
  
              $locationProvider.html5Mode({
                  enabled: true,
                  requireBase: false
              });
          });
  
          application.run(function ($http) {
              console.log(appName + ' is running');
          });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>In The Body:</strong><br/></p>
  
  <pre><code>&lt;div class="container" ng-controller="HomeIndexController"&gt;
      &lt;div class="row"&gt;
          &lt;h3&gt;Home Body&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="row" ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>At Page Bottom:</strong><br/></p>
  
  <p>FAILS: A controller with this name is not registered</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          application.controller('HomeIndexController', function ($scope) {
  
              var vm = this;
  
              console.log('HomeIndexController');
          });
      }); &lt;/script&gt;
  </code></pre>
  
  <p>WORKS</p>
  
  <pre><code>application.controller('HomeIndexController', function ($scope) {
  
      var vm = this;
  
      console.log('HomeIndexController');
  });
  </code></pre>