title: AngularJS - ng-repeat to assign/generate a new unique ID
body: <p>Im using a simple <code>ng-repeat</code> to generate a list of countries. Within each list is a hidden row/div that can be expanded and collapsed.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;li data-show="#country1"&gt;
      {{country.name}} has population of {{country.population}}
  
      &lt;div id="country1"&gt;
           &lt;p&gt;Expand/collapse content
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li data-show="#country2"&gt;
      {{country.name}} has population of {{country.population}}
  
      &lt;div id="country2"&gt;
           &lt;p&gt;Expand/collapse content
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li data-show="#country3"&gt;
      {{country.name}} has population of {{country.population}}
  
      &lt;div id="country3"&gt;
           &lt;p&gt;Expand/collapse content
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li data-show="#country4"&gt;
      {{country.name}} has population of {{country.population}}
  
      &lt;div id="country4"&gt;
           &lt;p&gt;Expand/collapse content
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>New code using <code>ng-repeat</code>:</strong></p>
  
  <pre><code>&lt;li ng-repeat="country in countries" data-show="????"&gt;
      {{country.name}} has population of {{country.population}}
  
      &lt;div id="???"&gt;
           &lt;p&gt;Expand/collapse content
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>How can i assign a dynamic/incremental id in my <code>ng-repeat</code>?</p>