Title: How to create different section in angular template (html file) conditionally
Tags: html;angularjs;angularjs-ng-repeat
Question: I am constructing ```three``` different table as following. 

```
  There is a lot of repetitive code in it.
```

The only different in each table is ```studentPermissions[]``` array which contain three objects for each student. So under each table i am just changing it for each student like ```studentPermissions[0], studentPermissions[1] and studentPermissions[2].```

Is there any further better i can write same code in less no of lines?

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

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

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

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

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

I was not sure about question title so please feel free to update it to make it more relevant with question contents. thanks

Also, I have to show data for each customer in septate table. this is requirement

Comment: @ kaveman, yes i am giving a try right away thanks

Comment: can you do an outer `ng-repeat` on `studentPermissions`?

Comment: can you provide a fiddle or plnkr link ??

Here is the accepted answer: Why not just use another ng-repeat?

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

Comment for this answer: yes i guess you're absolutely right. lemme give a try before marking it answer. thanks
Comment for this answer: absolutely cool. works fine and code is optimized as well thanks


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:07/02/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><angularjs><angularjs-ng-repeat>', 'Title': 'How to create different section in angular template (html file) conditionally', 'ViewCount': 33, 'id': 31174349, 'user_AboutMe': '', 'user_AccountId': 2109366.0, 'user_DisplayName': 'immirza', 'user_Reputation': 7094.0, 'user_Views': 436.0, 'user_id': 1874957.0}}