I'm new to AngularJS, but from what I've seen & done so far it is amazing. What I want to do is have an AngularJS binding inside an HTML attribute, but concatenate it with another string. The main place I would do this is classes & id's, as I like to have names like "thisform" & "thisdivid" etc. An example element from my page is:

<input type="checkbox" 
  name="tdl_task[]" 
  data-ng-checked="list.default" 
  id="tdl_task_{{ id }}" 
  data-ng-class="{tdl_item: true}" 
  data-ng-true-value="done" 
  data-ng-false-value="not_done" />

I would like it to be something like:

<input type="checkbox" 
  name="tdl_task[]" 
  data-ng-checked="list.default" 
  id="tdl_task_" + {{ id }} + "" 
  data-ng-class="{tdl_item: true}" 
  data-ng-true-value="done" 
  data-ng-false-value="not_done" />

but without the plusses. I would like to do this without wrapping it in JavaScript or PHP or creating another whole binding in the controller just for that attribute.

I'm new to AngularJS, but from what I've seen & done so far it is amazing. What I want to do is have an AngularJS binding inside an HTML attribute, but concatenate it with another string. The main place I would do this is classes & id's, as I like to have names like "thisform" & "thisdivid" etc. An example element from my page is:

<input type="checkbox" 
  name="tdl_task[]" 
  data-ng-checked="list.default" 
  id="tdl_task_{{ id }}" 
  data-ng-class="{tdl_item: true}" 
  data-ng-true-value="done" 
  data-ng-false-value="not_done" />

I would like it to be something like:

<input type="checkbox" 
  name="tdl_task[]" 
  data-ng-checked="list.default" 
  id="tdl_task_" + {{ id }} + "" 
  data-ng-class="{tdl_item: true}" 
  data-ng-true-value="done" 
  data-ng-false-value="not_done" />

but without the plusses. I would like to do this without wrapping it in JavaScript or PHP or creating another whole binding in the controller just for that attribute.

• javascript
• html
• angularjs
• concatenation

• 2 If you're using angular, inputs should always have ng-model on them. I'd look at using that instead, as you often don't need id attributes too if you use ng-model correctly. – Michael Low Commented Aug 30, 2013 at 12:19
• Edited it so it wouldn't be cut off like that. Stack wasn't connecting last night so when it connected again I just submitted whatever was there because I didn't want to type it all out again. – trysis Commented Aug 30, 2013 at 12:44
• Mikel is right. If you are trying to create an ID then you might be trying to do something un-angularish. Why do you need an ID? Is it for a label for attribute? – checketts Commented Aug 31, 2013 at 7:46
• 1 Maybe a for attribute. I could also use it for classes, as I said. The point was not to ask why I should or should not do it, but to ask whether & how I can do it. – trysis Commented Aug 31, 2013 at 14:11

2 Answers 2

For doing this you have to create one directive. id is provided by html itself you cannot modify its behavior. So create your own custom directive that will take your id and assign this as an id of your html element.

To learn more about directive please visit

Details study on directives

Not sure if this is new in Angular since the question was asked but I had this exact same problem. It turns out that you can get Angular to evaluate + replace the handlebars by preceding it with backslash (), i.e., id="tdl_task_\{{id}}"