AngularJS - ng-repeat to assign/generate a new unique ID

Question

Im using a simple ng-repeat to generate a list of countries. Within each list is a hidden row/div that can be expanded and collapsed.

The issue that i am facing, is that before i introduced Angular into my application, i manually hard-coded the element's ID, for example:

<li data-show="#country1">     {{country.name}} has population of {{country.population}}      <div id="country1">          <p>Expand/collapse content     </div> </li> <li data-show="#country2">     {{country.name}} has population of {{country.population}}      <div id="country2">          <p>Expand/collapse content     </div> </li> <li data-show="#country3">     {{country.name}} has population of {{country.population}}      <div id="country3">          <p>Expand/collapse content     </div> </li> <li data-show="#country4">     {{country.name}} has population of {{country.population}}      <div id="country4">          <p>Expand/collapse content     </div> </li> 

New code using ng-repeat:

<li ng-repeat="country in countries" data-show="????">     {{country.name}} has population of {{country.population}}      <div id="???">          <p>Expand/collapse content     </div> </li> 

How can i assign a dynamic/incremental id in my ng-repeat?

Answer 1

You can use $index https://docs.angularjs.org/api/ng/directive/ngRepeat

<li ng-repeat="country in countries" data-show="????">     {{country.name}} has population of {{country.population}}      <div id="country-{{$index}}">         <p>Expand/collapse content     </div> </li> 

Answer 2

You may need something like below when you got a nested ng-repeat:

<label id="country-{{$parent.$index}}-{{$index}}" ng-repeat="city in country.cites"> {{city.name}} </label>