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 a

Answer 1

{{$index+1}} will show 1-5 for every page of pagination in order to change serial no as per page no of pagination, use {{$index+curPage*5+1}}, where curPage is your current page in pagination.

Answer 2

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 3

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>