<div class="checkbox"><input type="checkbox" id="1"><label for="1"></label></div>
I want to style my checkbox, so there must be an id and a label, for the checkbox to work (to be checked or unchecked) properly.
I can set it using pure js, by incremental but that's not the angular js way. I'm putting it within ngrepeat, think of this like a todo list, how to make it incremental?
you could use the index part of ng-repeat, that is, the key:
<div class="checkbox" ng-repeat="(index,value) in items">
<input type="checkbox" id="{{index}}"><label for="{{index}}"></label>
</div>
or use the child scope $index value
<div class="checkbox" ng-repeat="item in items">
<input type="checkbox" id="{{$index}}"><label for="{{$index}}"></label>
</div>
http://plnkr.co/edit/Yh02rAuH40XU0hB4eQO6?p=preview
The difference between the two approaches is that you are assuming the scope $index suffices just for making the items ordinal. in the key approach you can actually access the original index on the items array (but you can also access it in $scope.item)
You can use $index to find the index of the item in the array (fiddle example)
<input type="checkbox" id="{{$index}}"/>
<label for="{{$index}}">{{$index}}</label>