Append value to translation token with ng-bind

Question

I'm trying to iterate through an element 5 times. For that I'm using ng-repeat with a track by $index. After that I would like to use the value from $index to add to a translation token. This index value is appended to the token and then it fetches its proper translation.

In my current code:

<div class="col-xs-12" ng-repeat="x in [].constructor(5) track by $index">
<div class="col-xs-10">
    <span>{{$index}}</span>
    <label class="form">
        <span ng-bind-html="'FORM.TRANSLATION_TOKEN_$index' | translate"></span>
    </label>
</div>
...                             
</div>

I get all the fields with FORM.TRANSLATION_TOKEN_$index, which means it's not getting translated properly.

What I to have is FORM.TRANSLATION_TOKEN_0 translated.

Any idea on how to make this work?

Answer 1

Try this:

...
<span ng-bind-html="'FORM.TRANSLATION_TOKEN_' +$index | translate"></span>
...