title: Loading javascript inside angular ui view
body: <p>I'm using angular ui routing to load templates inside a view. Each template has it's own javascript code specific for that page. Is there a way to load the template specific javascript code/file the moment that the template is opened? At the moment I have to add all the javascript code/files for every template in the main page.</p>
  
  <p>Another solution is to use an iframe. This allows the page to load it's own javascript files. But this way the navigation doesn't work as good (page is reset when refreshed).</p>
  
  <p>Example:</p>
  
  <p>index.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html  ng-app="testApp"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;script src="angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="angular-ui-router.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  
      &lt;script src="template1Functions.js"&gt;&lt;/script&gt;
      &lt;script src="template2Functions.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a ui-sref="template1"&gt;Template 1&lt;/a&gt;
      &lt;a ui-sref="template2"&gt;Template 2&lt;/a&gt;
  
      &lt;div ui-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>template1.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button onclick='template1TestFunction()'&gt;Template 1 Function&lt;/button&gt;
  </code></pre>
  
  <p>template2.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button onclick='template2TestFunction()'&gt;Template 2 Function&lt;/button&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>angular.module('testApp', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
      $stateProvider
          .state('template1', {
              url: '/template1',
              templateUrl: 'template1.html'
          })
          .state('template2', {
              url: '/template2',
              templateUrl: 'template2.html'
          });
  }]);
  </code></pre>
  
  <p>template1Functions.js</p>
  
  <pre><code>function template1TestFunction() {
  alert('Template 1 works') 
  };
  </code></pre>
  
  <p>template2Functions.js</p>
  
  <pre><code>function template2TestFunction() {
  alert('Template 2 works') 
  };
  </code></pre>
  
  <p>As you can see, I have to add the template[x]functions.js file in the index.html page. I would really like to load this from the template[x].html files.</p>