How to set id attribute of an element dynamically using AngularJS ?

In this article, we will see how to change the ID of any element dynamically using AngularJS, along with understanding its implementation through examples.

Approach 1: In this approach, a function is called when the button is clicked, which changes the ID of the element to id-5. We are calling a function on the scope variable and changing the ID from id-1 to id-5.

Example 1: This example describes setting the element's id attribute dynamically in AngularJS.

Output:

Approach 2: In this approach, a function is called when the button is clicked, which changes the ID from one to another. We are calling a function on the scope variable and changing the ID from id-0 to id-1, id-1 to id-2, and id-2 to id-0.

Example 2: In this example, the element's id attribute is utilized to change the styling property.

Output:

Approach 3: In this approach, the ID of the element is set by an <input> element.

Example 3: In this example, the <input> element is used to enter the id value that will be changed dynamically by clicking the button.

Output: