Dynamically generate materializecss checkboxes

Question

I am dynamically creating materializecss checkboxes through an ng-repeat. Problem is that in materialize, the 'for' on the checkbox label must correspond with the id on the input as such:

<div class="checkbox-patient-info-medical">
  <input type="checkbox" id="medical-checkbox">
  <label for="medical-checkbox"> Prior Authorization Required*</label>
</div>

I am generating fields with an ng-repeat, and there is 1 textbox for each generated set of field. Code as follows:

<div class="medical-insurance-holder" ng-repeat="person in vm.myData[0].medicalInsuranceContainer track by $index">
  <p class="patient-info-holder-text">
    RELATIONSHIP TO PATIENT:&nbsp&nbsp&nbsp<b>{{person.relationshipToPatient}}</b>
  </p>
  <p class="patient-info-holder-text">
    GROUP NUMBER:&nbsp&nbsp&nbsp<b>{{person.groupNum}}</b>
  </p>
  <p class="patient-info-holder-text">
    SUBSCRIBER D.O.B:&nbsp&nbsp&nbsp<b>{{person.subscriberDob}}</b>
  </p>
  <div class="checkbox-patient-info-medical">
    <input type="checkbox" id="medical-checkbox"><label for="medical-checkbox"> Prior Authorization Required*</label>
  </div>
 </div>

How can I change the label for and id of these checkboxes as the ng-repeat creates them? If I leave it as is, I can only click on the first checkbox created.

Thanks

Answer 1

You can integrate the current index of the ng-repeat in them as follows:

<div class="checkbox-patient-info-medical">
   <input type="checkbox" id="medical-checkbox{{$index}}">
   <label for="medical-checkbox{{$index}}"> Prior Authorization Required*</label>
</div>

Check fiddle: https://jsfiddle.net/twizzlers/z0meqr6h/1/

Hope it helps =)