How do i select multiple checkbox have same name and Id

Question

I am struggling to find the logic to handle my situation stated below. please have a look.

I have subject table and it has three subjects. Each subject has unique id. (Id, Name)

I am displaying each subject on UI as child checkboxe (using <ul> element) for 3 different students (parent checkbox using <li> ).

eg

Andy
    Math
    English
    Computer
John
    Math
    English
    Computer
Murray
    Math
    English
    Computer

Code:

<div>
    <div>
        <h5>Students Courses</h5>
    </div>
    <ul>
        <li ng-repeat="student in Students">
            <input type="checkbox" class="checkbox" id="{{student[0].Id}}"/>
            <label for="{{student[0].Id}}"><span class="Radiobox-txt" id="{{student[0].Name}}">{{student[0].Name}}</span></label>
            <ul>
                <li ng-repeat="subject in student[0].Subjects">
                    <input type="checkbox" id="{{subject.Id}}" ng-model="subject.Checked" />
                    <label for="{{subject.Id}}"><span id="{{subject.Name}}">{{subject.Name}}</span></label>
                </li>
            </ul>
        </li>
    </ul>
</div>

So, user can select subject under each student and can save it. The Id of each subject is unique and is coming from Student table.

Problem: For example, Math subject has same Id and it is repeated for different student. So, when i select Math subject for Murray it basically selects Math subject under Andy because Id is same.

Can someone suggest how i can handle it in better way?

Please note i dont want to have different Id of Math under different student otherwise it will be wrong becuase i am storig select subject Id in my table. So stored Id has to be matched with original Id of subject table.

Answer 1

You could repeat the selector id with the same name in html, that is against the web standard. You should use $index of ng-repeat to make id unique.

The unique id would be for inner ng-repeat would be {{subject.Id+ $index + $parent.$index}}

Markup

    <li ng-repeat="student in Students">
        <input type="checkbox" class="checkbox" id="{{student[0].Id + $index + $parent.$index}}"/>
        <label for="{{student[0].Id+ $index + $parent.$index}}"><span class="Radiobox-txt" id="{{student[0].Name}}">{{student[0].Name}}</span></label>
        <ul>
            <li ng-repeat="subject in student.Subjects">
                <input type="checkbox" id="{{subject.Id+ $index + $parent.$index}}" ng-model="subject.Checked" />
                <label for="{{subject.Id+ $index + $parent.$index}}"><span id="{{subject.Name}}">{{subject.Name}}</span></label>
            </li>
        </ul>
    </li>

Answer 2

Use $parent to iterate over the parent loop.

<li ng-repeat="student in Students">
        <input type="checkbox" class="checkbox" id="{{student.Id}}"/>
        <label for="{{student.Id}}"><span class="Radiobox-txt" id="{{student[0].Name}}">{{student[0].Name}}</span></label>
        <ul>
            <li ng-repeat="subject in student.Subjects">
  <input type="checkbox" id="{{subject.Id}}_{{ $parent}}" ng-model="subject.Checked" />
                <label for="{{subject.Id}}_{{ $parent}}"><span id="{{subject.Name}}">{{subject.Name}}</span></label>
            </li>
        </ul>
    </li>