how to use angularJs var to an html attribute

Question

I'm including a script tag in an angular partial, where I load a js-widget. The widget has an attribute data-title, where I can pass the title. In my case, the title is stored in an angular js view variable. How can I pass the title?

if I try e.g.

<script type="text/javascript" data-title="{{ title }}" src="http://example.com"></script>

, the title of the widget results in {{ title }}

EDIT:

I added a js fiddle which shows the problem. The main problem is, that at the moment when the external script is executed, the data-title attribute is still {{ title }}. AngularJS probably changes these view variables afterwards in an event loop. http://jsfiddle.net/6tqdZ/15/

Answer 1

To answer your question you will need to evaluate angular until the document is ready since your fiddle is running outside of angular you will have to do something like:

$(document).on('ready',function(){
  var t = document.getElementById("placeholder");
  t.innerHTML = t.getAttribute("data-title"); 
  alert(t.getAttribute("data-title"));
});

Here is the updated fiddle.

Important: mixing angular with JQuery events or any other events "outside of angular" world is not recommended and there is not guarantee this will always work nor it will be accepted way to resolve this.

Answer 2

In angular js Controller, define your html variable with scope

function yourController($scope){
  $scope.title = "yourtitle";
}