title: Dynamically loaded AngularJS application
body: <p>I'm looking to integrate an AngularJS web application into a number of websites. I'd like to be able to provide each website administrator with an HTML code, such as the following:</p>
  
  <pre><code>&lt;div id='angular-integration-app'&gt;&lt;/div&gt;&lt;script src="widget.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>With this HTML code inserted into the website, the website should load AngularJS and insert an AngularJS application as a child element of the element labeled with the ID of "angular-integration-app."</p>
  
  <p><a href="http://plnkr.co/edit/Q19ttwOVJ3BTX8JXEMV5" rel="nofollow">This Plunker has an implementation</a>, however this implementation isn't working. It fails intermittently, with an error of:</p>
  
  <pre><code>Uncaught ReferenceError: angular is not defined  application.js:1
  Uncaught Error: [$injector:modulerr]  angular.js:38
  </code></pre>
  
  <p>I've noticed that it usually works fine the first time it's loaded, but when the browser refresh button is pressed, it often fails. This is particularly true when it's not being hosted through Plunker.</p>
  
  <p>Please advise on the best way to create a dynamic AngularJS application integration that works all the time.</p>