title: Angularjs manual bootstrap
body: <p>I would like to manually bootstrap my angular app on dom load but Angular doesn't seem to be able to bootstrap my app when i try to wait until dom load </p>
  
  <pre><code> &lt;body&gt;
   &lt;div ng-app="myApp"&gt;
    {{1 + 1}}
   &lt;/div&gt;
   &lt;script src="angular.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="delay.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And here's delay.js</p>
  
  <pre><code>window.onload = function(){
  console.log('reached 2')
  var myApp = angular.module('myApp',[])
  }
  
  console.log('reached 1')
  </code></pre>
  
  <p>The above code throws with the following error. </p>
  
  <pre><code>reached 1 
  Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
  Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify th...&lt;omitted&gt;...0) 
  reached 2 
  </code></pre>
  
  <p>After looking at various other examples, the bootstrapping seems to work seamlessly when i do it outside the window.onload event like this. </p>
  
  <p>delay.js </p>
  
  <pre><code>//this bootstrap works 
  angular.module('myApp',[])
  console.log('reached 1')
  </code></pre>
  
  <p>Not sure what's happening here, is the module not visible to angular during the onload callback ?</p>
  
  <p>Further even the following in delay.js fails</p>
  
  <pre><code>//still fails to bootstrap     
  angular.element(document).ready(function(){
      console.log('reached 2')
      var myApp = angular.module('myApp',[])
      })
  </code></pre>
  
  <p>Even the following fails to work </p>
  
  <pre><code>angular.element(document).ready(function(){
  console.log('reached 2')
  angular.bootstrap(document,[myApp])
  var myApp = angular.module('myApp',[])
  })
  </code></pre>
  
  <p>OR</p>
  
  <pre><code>angular.element(document).ready(function(){
  console.log('reached 2')
  var myApp = angular.module('myApp',[])
  angular.bootstrap(document,[myApp])
  })
  </code></pre>
  
  <p>OR even </p>
  
  <pre><code>angular.element(document).ready(function(){
  angular.bootstrap(document.body.children[0],['myApp'])
  var myApp = angular.module('myApp',[])
  console.log('reached 2')
  })
  </code></pre>