title: How to bind <script> element's src attribute in AngularJS
body: <p>I am trying to bind the <code>src</code> attribute of an HTML <code>&lt;script&gt;</code> element to a variable in my angular controller, so that I can update it from controller without dealing with any UI.</p>
  
  <p>So far I've tried all these options:</p>
  
  <pre><code>&lt;script type="text/javascript" ng-src="{{sourceUrl}}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{{sourceUrl}}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" ng-src="sourceUrl"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In my controller I have:</p>
  
  <pre><code>$scope.sourceUrl = "https://&lt;some url goes here&gt;";
  </code></pre>
  
  <p>When running the page in the browser after the $scope.sourceUrl gets set there is no outgoing request to sourceUrl, so I am sure I am doing something wrong. Any ideas?</p>
  
  <p>I found several posts about <code>src</code> attribute of <code>&lt;img&gt;</code> element, and <code>ng-src</code> should work as they say, but I guess <code>&lt;script&gt;</code> is somehow different. </p>