title: How to correctly load Cordova and Angularjs hybrid app with remote scripts
body: <p>We have a single page hybrid app developed with <code>cordova 3.4.0</code> and <code>angularJS</code> via <code>Hybrid app plugin(CPT2.0)</code> in visual studio 2013.<br>
  This app has some embedded resources (jquery, angularjs, bootstrap and few propietary code), and needs to get some other remote resources (angularjs modules, css and more). 
  Remote resources are stored in a CDN and bundled via asp.net bundling.</p>
  
  <p>This choice was made because the prerequisite is making fast update of the app without delay of store validation and publishing, and because we have a responsive website that shares angular templates and resources with this app.  </p>
  
  <p>The app html mainpage has a <code>&lt;head&gt;</code> section that references embedded script and for the remote script we write in dom some script tags (using <code>.append</code>) , because the base url of remote resources is a parameter stored in a config file.</p>
  
  <p>After remote script loading, app has to wait cordova event <code>deviceready</code> event and when this event is fired, app should finally bootstrap the main angular app.</p>
  
  <p>This is a basic sample of what we are doing:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;!-- embedded scripts--&gt;
          &lt;script type="text/javasript" src="scripts/jquery.js" /&gt;
          &lt;script type="text/javasript" src="scripts/angular.js" /&gt;
          &lt;script type="text/javasript" src="scripts/embeddedScript2.js" /&gt;
          &lt;script type="text/javasript" src="cordova.js" /&gt;
  
          &lt;!-- remote scripts--&gt;
          &lt;script type="text/javascript"&gt;
              // path to cdn bundle loaded from a xml config
              var serverbundle = 'http://loadedfromconfig.com/cdn/myBundleMobile.js';
              // path to angularjs bundle shared with website and loaded from xml config
              var angularbundle = 'http://loadedfromconfig.com/myBundleMobile.js';
              // simplified append to head of remote scripts with path composition
              $("head").append("'&lt;script type='text/javascript' src='"+serverbundle+"'/&gt;");
              $("head").append("'&lt;script type='text/javascript' src='"+angularbundle+"'/&gt;");
  
              // cordova events binded onload
              var app = {
                  initialize: function(){
                      document.addEventListener("deviceready", onDeviceReady, false);
                  },
                  onDeviceReady: function(){
                      // manual bootstrapping of angularjs app, when all ready
                      angular.bootstrap(document, ['myApp']);
                  }
              };
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload='javascript: app.initialize()'&gt;
  
          &lt;!-- HTML and AngularJS directives --&gt;
          &lt;angular-directive /&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My question is: 
  what is the correct way to synchronize remote resources loading, cordova <code>deviceready</code> and angular bootstrapping? </p>
  
  <p>The design above works great, but sometimes remote scripts are not loaded or <code>deviceready</code> starts early and bootstraps angular app before all its modules are properly loaded.<br>
  I have also tried to better synchronize script loading and cordova but without success because some designs are not compatible with all the tree target platforms (ios, wp8 and android).</p>