user-group-membership.html

 <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
     <ol class="breadcrumb">
         <li><a href="#/realms/{{realm.realm}}/users">{{:: 'users' | translate}}</a></li>
         <li>{{user.username}}</li>
     </ol>

     <kc-tabs-user></kc-tabs-user>

     <form class="form-horizontal" name="realmForm" novalidate>
         <div class="form-group" kc-read-only="!access.manageUsers">
             <label class="col-md-1 control-label" class="control-label"></label>

             <div class="col-md-8" >
                  <div class="row">
                     <div class="col-md-5">
                         <table class="table table-striped table-bordered">
                             <thead>
                             <tr>
                                 <th class="kc-table-actions" colspan="5">
                                     <div class="form-inline">
                                         <label class="control-label">{{:: 'group-membership' | translate}}</label>
                                         <kc-tooltip>{{:: 'group-membership.tooltip' | translate}}</kc-tooltip>

                                         <div class="pull-right" data-ng-show="access.manageUsers">
                                             <button id="leaveGroups" class="btn btn-default" ng-click="leaveGroup()">{{:: 'leave' | translate}}</button>
                                         </div>
                                     </div>
                                 </th>
                             </tr>
                             </thead>
                             <tbody>
                             <tr>
                                 <td>
                                     <select id="groupMembership" class="form-control" size=5
                                                            ng-model="selectedGroup"
                                                            ng-options="r.path for r in groupMemberships">
                                         <option style="display:none" value="">{{:: 'select-a-type.placeholder' | translate}}</option>
                                 </select>


                                 </td>
                             </tr>
                             </tbody>
                         </table>
                     </div>
                     <div class="col-md-5">
                         <table class="table table-striped table-bordered">
                             <thead>
                             <tr>
                                 <th class="kc-table-actions" colspan="5">

                                     <div class="form-inline">
                                         <label class="control-label">{{:: 'available-groups' | translate}}</label>
                                         <kc-tooltip>{{:: 'membership.available-groups.tooltip' | translate}}</kc-tooltip>

                                         <div class="pull-right" data-ng-show="access.manageUsers">
                                             <button id="joinGroup" class="btn btn-default" ng-click="joinGroup()">{{:: 'join' | translate}}</button>
                                         </div>
                                     </div>
                                 </th>
                             </tr>
                             </thead>
                         <tbody>
                             <tr>
                                 <td>                             <div
                                         tree-id="tree"
                                         angular-treeview="true"
                                         tree-model="groupList"
                                         node-id="id"
                                         node-label="name"
                                         node-children="subGroups" >
                                 </div>

                                 </td>
                             </tr>
                             </tbody>
                         </table>
                     </div>
                 </div>
             </div>
         </div>
     </form>
 </div>

<kc-menu></kc-menu>