Angular: Dynamically Setting the Id with ng-repeat and ng-attr-id

Question

I'm trying to set the id of an anchor tag with a value that is used in my ng-repeat. {{channel}} should include a string with the channel number. {{channel}} is displayed fine as the text within the anchor tag, however for the id, the id is empty, does anyone know how I can implement this properly?

<li ng-repeat="channel in vm.channels">
    <a ui-sref="channel({channel:channel, event: null})" ng-attr-id="{{channel}}" ui-sref-active="active">{{managedContent 'channel'}} \{{channel}}</a>
</li>

Answer 1

    <div class="accordion" [attr.id]="'accordionTwo_' + i" *ngFor=" let i = index; let message of messages">

    <button class="btn btn-info pull-right" data-toggle="collapse" [attr.data-parent]="'#accordionTwo_' + i" [attr.href]="'#collapseTwo_' + i"> Details </button>
    <div [attr.id]="'collapseTwo_' + i" class="panel-collapse collapse in">
    <h1>Expanded body</h1>
    </div>
    </div>

Try the above code for *ngFor accordion.