Angular/ ID + integer

Question

I am using angular's ng-repeat to create an array of objects that have the same html format. The objects are then populated with values by either using expressions or ng-bind-html. The different objects contain list pages that tab to different pages within the context body according to id. The problem is that the tab buttons are supposed to take me to the varying pages within the specific object but because the ng-repeat creates duplicates of the exact form with varying values according to the expressions/directives the whole page is treated as one object and id's for one tab respond on different object from the array that have the same attribute. I am looking for a way to add an integer to the end of each id after the creation of each object from the array so that each item will be treated differently instead of them all behaving the same because the have the same exact id the code is below.

<div class="col-md-6" data-ng-repeat="track in dashboard.items track by track.id">
            <div class="panel-body">
                <div class="panel-primary">
                    <h3 class="panel-title"><i class="icon-rocket fa-fw"></i> <span class="hidden-xs"><strong>@*Track name goes in here*@{{track.name}}</strong></span></h3>
                </div>
            </div>
            <div id="demo3-panel" class="panel panel-blue" data-context="">
                <div class="panel-in">
                    <div class="panel-blue pull-right">
                        <ul class="nav nav-tabs nav-contrast-dark" id="demo3-tabs">
                            <li class="active"><a href="#description1" data-toggle="tab">Description</a></li>
                            <li class=""><a href="//this is the id that I want to change by adding an integer to the end of the id name after each ng-repeat// moreInfo" data-toggle="tab">More Info</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Requirements<i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li ng-repeat="course in track.courses"><a href="#{{course.name}}" data-toggle="tab">{{course.name}}</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="description1 {{course.name}}">
                            <br><br>
                            <p class="text-blue" style="text-align:center"><strong>Description:</strong></p>
                            <p ng-bind-html="track.description"></p>
                        </div>
                        <div class="tab-pane fade" id="moreInfo1"><br><br>
                           <p class="text-blue" style="text-align:center"><strong>More Information about {{track.name}}:</strong></p>
                            <p ng-bind-html="track.moreInformation"></p>
                        </div>
                        <div class="tab-pane fade" ng-repeat="course in track.courses" id="{{course.name}}"><br><br>
                            <p class="text-info" style="text-align:center"><strong>{{course.name}}:</strong></p>
                            <p>{{course.description}}</p>
                            <a href="#">Register For {{course.name}} Section</a>
                        </div>
                    </div><!-- /tab-content -->
                </div><!-- /panel-body -->
                <a href="track/{{track.id}}/edit" class="cmdEditButton btn btn-info">Edit</a>
            </div><!-- /.panel -->
        </div><!-- /.cols -->
    </div><!-- /.panel -->

Answer 1

WIthin each ng-repeat child scope there is a set of scope variables created of which one is $index

You should be able to do something like:

<a href="#tab-content-{{$index}}">

See ng-repeat docs for list of all the variables available within each child scope