如何使用angularJS将脚本动态添加到index.html？

Question

I have 2 html files(a.html and index.html) and 1 javascript file(file.js) In a.html-------i have a drop-down menu of different languages(like english,german,hindi). From the drop down 1 of the language is selected.

 <select ng-model="lang" class="form-control input-custom input-sm" ng-change="language(lang)" required>
        <option value="" selected>--Choose language--</option>
        <option value="en-us">english</option>
        <option value="id-id">indonesia</option>
 </select>

file.js---Based on the language selected from a.html file, i update the index.html file.

$scope.language=function(lang){
  var search_quarry = "bower_components/angular-i18n/angular-locale_" + lang + ".js";
  var scr = document.createElement("script");
  scr.src = search_quarry;
  document.getElementsByTagName("body")[0].appendChild(scr);
  console.log(document);
}

In file.js if i do console.log(document)...it shows that the script tag is attached in the body of index.html. But the result is not reflected when i select the language.

script tag for appending to index.html

<script src="bower_components/angular-i18n/angular-locale_id-id.js"></script>

index.html----- If i append the script tag manually in index.html the result is shown but when i dynamically updates it..the script tag gets attached to index.html file but the results are not reflected. How can i reload index.html such that the dynamically added content also reflects while running the application?

Answer 1

Try using setAttribute() instead of direct assignment, change:

scr.src = search_quarry;

to

scr.setAttribute('src', search_quarry);