So I'm inside an ng-repeat like this:
<li ng-repeat="x in xs">
<form>
<label for="UNIQUELABEL">name</label>
<input id="UNIQUELABEL">
<label for="ANOTHERUNIQUELABEL">name2</label>
<input id="ANOTHERUNIQUELABEL">
</form>
</li>
Which should produce something like
<li>
<form>
<label for="UNIQUELABEL1">name</label>
<input id="UNIQUELABEL1">
<label for="ANOTHERUNIQUELABEL1">name2</label>
<input id="ANOTHERUNIQUELABEL1">
</form>
</li>
<li>
<form>
<label for="UNIQUELABEL2">name</label>
<input id="UNIQUELABEL2">
<label for="ANOTHERUNIQUELABEL2">name2</label>
<input id="ANOTHERUNIQUELABEL2">
</form>
</li>
...
I'm new to AngularJS and not sure of the right way to approach this (none of the docs use label at all).
You need to add the $index property(zero based) that is available on the scope in the repeater
<li ng-repeat="x in xs">
<form>
<label for="UNIQUELABEL{{$index+1}}">name</label>
<input id="UNIQUELABEL{{$index+1}}">
<label for="ANOTHERUNIQUELABEL{{$index+1}}">name2</label>
<input id="ANOTHERUNIQUELABEL{{$index+1}}">
</form>
</li>
Since ng-repeat provides a new scope object on each iteration, I prefer using something like
<li ng-repeat="x in xs">
<form>
<label for="UNIQUELABEL{{$id}}_1">name</label>
<input id="UNIQUELABEL{{$id}}_1">
<label for="UNIQUELABEL{{$id}}_2">name2</label>
<input id="UNIQUELABEL{{$id}}_2">
</form>
</li>
The advantage of this method is that you are guranteed not to have a duplicate selector with same id on the document. Duplicates could otherwise easily arise when routing or animating.
For many scenarios, a better solution might be to enclose both the <input> and label text in a single <label> element. This has the added benefit of working properly with hierarchical data, since you don't need to use the iterator variable:
<li ng-repeat="x in xs">
<form>
<label>
name
<input>
</label>
<label>
name2
<input>
</label>
</form>
</li>