<div class="row">

  <!-- begin col-12 -->
  <div class="col-md-12">
    <!-- begin panel -->
    <div class="panel panel-info">
      <div class="panel-heading">

        <h4 class="panel-title p-heading" style="font-family:'Open Sans';">Display Preference</h4>
        <h6 style="color: #fff;"><em>Drag and drop the navigation links below to rearrange the display. 
          Press Save once done and refresh the site to see the new navigation</em></h6>  
      </div>
      <div class="panel-body" style="padding: 24px; padding-bottom: 2px; background: #2a3339;">
        <div class="table-responsive">
          <div ng-controller="displayPref">
            <!-- Nested node template -->
            <div ui-tree="treeOptions" id="tree-root" data-drag-delay="500">
              <ol ui-tree-nodes="" ng-model="data" parent-data="test">
                <li ng-repeat="node in data" ui-tree-node="" parent-data="test">
                  <div data-ng-click="showList(node)" ui-tree-handle class="tree-node tree-node-content"
                    style="font-size: 14px; color: #a8acb1; font-weight: normal;font-family:'Open Sans'; ">
                    {{node.name}}
                    
                  </div>

                  <ol data-ng-show="node.expand" ui-tree-nodes="" ng-model="node.nodes" parent-data="{{node.id}}">
                    <li ng-repeat="nestedNode in node.nodes" parent-data="{{node.id}}" ui-tree-node>
                      <div data-ng-click="showList(nestedNode)" ui-tree-handle class="tree-node tree-node-content"
                        style="font-size: 14px; color: #a8acb1; font-weight: normal;font-family:'Open Sans';">
                        {{nestedNode.name}}
                      </div>
                  
                    


                      <ol data-ng-show="nestedNode.expand" ui-tree-nodes="" ng-model="nestedNode.nodes"
                        parent-data="{{nestedNode.id}}">
                        <li ng-repeat="nestedNodeNode in nestedNode.nodes" parent-data="{{nestedNode.id}}" ui-tree-node
                          style="font-size: 14px;  color: #a8acb1; font-weight: normal;font-family:'Open Sans';">
                          <input style="display: none;" type="checkbox" data-ng-model="nestedNodeNode.isSelected">
                          {{nestedNodeNode.name}}
                        </li>
                      </ol>
                      
                    
                    </li>
                  </ol>
                </li>
              </ol>
              <br>
            </div>
            <button class="btn btn-primary" id="updatebtn" style="margin-bottom: 10px; background: #3a92ab !important;" ng-click="updatePref()">Save</button>
          </div>
        </div>
      </div>
    </div>
    <!-- end panel -->
  </div>
