html

<div class="col-xs-4" ng-class="roleSelectionPanel">
        <div class="account-responsibility-form">
            <div class="top">
                Employee Account and Responsibilities
            </div>
            <div class="context">
                <label for="role">Choose role</label>
                <select class="form-control element-size" id="role" ng-model="selectedRole"
                        ng-change="populateRawSkill()"
                        ng-options="role as role.title for role in roles track by role.id"
                        required name="pickRole"></select>
                 <span ng-show="employeeData.pickRole.$touched && employeeData.pickRole.$invalid"
                       class="form-invalid-error">Assign this employee a role, skills and skills' certification.</span>
                <table class="table table-bordered table-striped" ng-show="selectedSkills.length"
                       style="margin-bottom: 0">
                    <tr>
                        <th class="col-md-5">Skill Title</th>
                        <th class="text-center">Certification</th>
                        <th class="col-md-5">Certification Desc</th>
                    </tr>
                    <tr ng-repeat="skill in selectedSkills" required>
                        <td>{{skill.title}}</td>
                        <td class="text-center">
                            <label>
                                <input type="checkbox" ng-model="skill.certificated">
                            </label>
                        </td>
                        <td>
                            <input type="text" class="form-control input-sm" ng-model="skill.certification"
                                   style="width: 100%">
                        </td>
                    </tr>
                </table>
                <div style="margin-top: 15px;">
                    <button class="btn btn-sm btn-success" ng-click="saveRole()"
                            ng-disabled="!selectedSkills.length">Save Selection
                    </button>
                    <!--<button class="btn btn-sm btn-danger" ng-click="roleSelectionPanel = ''">Cancel</button>-->
                    <button type="button" class="btn btn-warning btn-sm" ng-click="advancePanel = !advancePanel">
                        Show selected
                        <i ng-show="!advancePanel" class="fa fa-arrow-down"></i><i ng-show="advancePanel"
                                                                                   class="fa fa-arrow-up"></i>
                    </button>
                </div>
            </div>
            <div class="advance_setting" ng-show="advancePanel">
                <span class="title">Advance Setting (Skill based Role)
                    <!--<button class="btn btn-sm btn-success pull-right"
                            ng-click="activeRoleAssignmentPanel()">Add</button>-->
                </span>
                <table class="table table-bordered main-table">
                    <tr>
                        <th class="col-md-4 text-center">Role Title</th>
                        <th class="col-md-8">Skills</th>
                    </tr>
                    <tr ng-repeat="obj in selectedRoles">
                        <td class="text-center vertical-center col-md-4">
                            {{obj.role.title}}
                            <span class="pull-right remove-btn" ng-click="deleteRole($index)"><i
                                    class="fa fa-times"></i></span>
                        </td>
                        <td>
                            <table class="table table-striped table-bordered sub-table col-md-8">
                                <tr>
                                    <th class="col-md-2 text-center">Skill ID</th>
                                    <th class="col-md-4">Skill Title</th>
                                    <th class="col-md-3 text-center">Certificated</th>
                                    <th clss="col-md-3">Certification Num</th>
                                </tr>
                                <tr ng-repeat="skill in obj.skills">
                                    <td class="col-md-2 text-center">{{skill.id}}</td>
                                    <td class="col-md-4">{{skill.title}}</td>
                                    <td class="col-md-3 text-center">{{skill.certificated ? 'Yes' : 'No'}}</td>
                                    <td class="col-md-3">{{skill.certification}}</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
     </div>
 </div>