How to dynamically change HTML id using angularJs

Question

Inside ng-repeat, I want to do something like this:

<div class='col-sm-12' id="playerHolder"><span id="vidPlayerDIV{{$index}}"></span></div> 

If divs are named vidPlayerDiv0, vidPlayerDiv1, etc.

However, this code does not work. How can i do this?

Answer 1

You can try the following:

 id="{{'vidPlayerDiv' + $index}}" 

Answer 2

I am creating a JSFiddle with the correct operation.

  <div ng-repeat='item in items'> <span id="{{'vidPlayerDiv' + $index}}">{{'vidPlayerDiv' + $index}}</span> </div> 

Answer 3

This exact code worked for me, at least there should be an error in your code.

  <div ng-repeat="number in numbers"><div class="box{{$index}}">Hello </div></div>