Как условно создать другой раздел в угловом шаблоне (html файл)

Я строю three таблицы, как показано ниже.

В нем много повторяющегося кода.

Единственным отличием в каждой таблице является studentPermissions[] который содержит три объекта для каждого ученика. Поэтому под каждой таблицей я просто studentPermissions[0], studentPermissions[1] and studentPermissions[2]. ее для каждого ученика, например studentPermissions[0], studentPermissions[1] and studentPermissions[2].

Есть ли еще лучше, я могу написать один и тот же код в меньшем количестве строк?

<div class="module-container">
    <div>
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermissions[0].SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermissions[0].Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermissions[1].SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermissions[1].Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <thead>
                <tr >
                    <td>Student</td>
                    <td>{{studentPermissions[2].SubjectName}}</td>
                </tr>
                <tr>
                    <th></th>
                    <th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in studentPermissions[2].Students">
                    <td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
                    <td ng-repeat="permission in student.Permissions">
                        <input ng-model="permission.Checked" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Я не был уверен в заголовке вопроса, поэтому, пожалуйста, не стесняйтесь обновлять его, чтобы сделать его более актуальным с содержанием вопроса. благодаря

Кроме того, я должен показывать данные для каждого клиента в отдельной таблице. это требование