How to set the id attribute of an HTML element dynamically with angularjs (1.x)?

Question

Provided an HTML element of type div, how to set the value of its id attribute, which is the concatenation of a scope variable and a string?

 

Answer 1

To set the id attribute of an HTML element dynamically with angularjs (1.x) ngAttr directive can be used.

Here’s the code:-

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

The above code will get interpolated into:-

<div id="object-1"></div>