title: jQuery - ng-view not running JavaScript unless the script is inside the rendered html
body: <p>I have a <code>&lt;script src=""&gt;</code> outside my <code>ng-view</code>, the script itself is a jQuery function that changes the content inside the <code>ng-view</code>, but it is not working unless I put the <code>&lt;script src=""&gt;</code> inside the html page I am rendering. This is fairly annoying and breaking the DRY rule (Don't repeat yourself) because I have to put said script in all of my html files now, since putting it at the bottom of my index.html is not working.</p>
  
  <p>Here's my index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html ng-app="enitoniApp"&gt;
  
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- Stylesheets --&gt;
      &lt;link rel="stylesheet" href="global.css"&gt;
      &lt;link rel="stylesheet" href="pages/css/home.css"&gt;
  
      &lt;!-- Fonts --&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'&gt;
  
  &lt;/head&gt;
  
  
  &lt;body ng-controller="mainController"&gt;
      ...
          &lt;!-- Angular --&gt;
          &lt;div class="wrap"&gt;
              &lt;div ng-view&gt;&lt;/div&gt;
             ...
  &lt;/body&gt;
  
  &lt;!-- Javascripts  --&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="js/angular_script.js"&gt;&lt;/script&gt;
  
  &lt;!--- Global Script --&gt;
  &lt;script src="js/global.js"&gt;&lt;/script&gt;
  &lt;!--- Content --&gt;
  &lt;script src="js/contentinject.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Note: "..." represents code that was too big and had to be taken out for this to be readable.</p>
  
  <p>Now inside <code>contentinject.js</code> we have: </p>
  
  <pre><code>/** Content Injection **/
  
  function isValid() {
      $.getJSON("/js/content.json", function (d) {
          console.log("json parsing of 'content.json' performed successfully.");
      }).fail(function (d, textStatus, error) {
          errorCall("Fatal error", "json", "Something went wrong and the site may not properly display, if the problem persists contact the website administrator.&lt;br/&gt;&lt;br/&gt;Sorry about that.","&lt;b&gt;Couldn't parse 'content.json'&lt;/b&gt;&lt;br/&gt;&lt;br/&gt;" + error)
      });
  }
  setTimeout(isValid, 2000)
  
  $.getJSON("/js/content.json", function (data) {
      $(".lander .title").text(data.lTitle);
      $(".lander .subtitle").text(data.lSubtitle);
      $(".lander .text").html(data.lText.split('\n').join('&lt;br /&gt;'));
  });
  </code></pre>
  
  <p>Which modifies the DOM of:</p>
  
  <p>home.html (What gets injected into ng-view, also our example partial)</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="lander"&gt;
          &lt;div class="w-ctrl"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="title-con"&gt;
                      &lt;div class="title"&gt;&lt;/div&gt;
                      &lt;div class="subtitle"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="text-con"&gt;
                      &lt;div class="text"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now as you can see, the script is CLEARLY at the bottom of the document, and also under angular.js, so it should load and inject the stuff into partial, but it isn't. If I put <code>contentinject.js</code> inside home.html, it works. </p>
  
  <p>Is there any way around this?</p>