HTML attributes and angular variables (controllers/directive)


Is there a way to set HTML attributes, with values of scope variables?

<img src={{imageName}}/>

Is such a thing possible at all?


I hope this is not a troll question.

Yes, it is possible, that’s the point of AngularJS. You can use a scope variable and set it as an HTML attribute value.



Thanks. <img> tag wasn’t the one with which i originally i had this question.
The <input> tag… how do we set the ‘type’ attribute of an tag, with a scope variable?


Simply, just use my example and replace img with input:


It doesn’t seem to work.
I tried:
<input ng-src="{{ipType}}"/> (seems awkward)
, where ipType is defined as:
$scope.ipType = password;

Is it some other attribute such as ngBind?


It is not ng-src (src attribute is used only for img fields).

It should be type attribute, like in my example.

Here’s another example:

Just click on the provided button and field will change from color picker to password box.


The link is showing the same example as before. Looks like it’s not updated.


Refresh that example, I can see every new change.

Even better, here’s a forked example;


It’s updated now, and it now works in my code too!
I was using a directive’s scope variable, and was not using the correct naming conventions.