<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Nestable list</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Nestable list</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight" ng-controller="nestableCtrl">
    <div class="row">
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        Nestable list
                    </h5>
                </div>
                <div class="ibox-content">
                    <p>
                        Angular UI Tree is an AngularJS UI component that can sort nested lists, provides drag & drop support and doesn't depend on jQuery.
                    </p>
                    <script type="text/ng-template" id="nodes_renderer.html">
                        <div ui-tree-handle class="tree-node tree-node-content">
                            <a class="pull-right btn btn-white btn-xs" data-nodrag ng-click="remove(this)"><span class="fa fa-trash"></span></a>
                            <a class="pull-right btn btn-white btn-xs" data-nodrag ng-click="newSubItem(this)"><span class="fa fa-plus"></span></a>
                            <a class="btn btn-primary btn-xs" data-nodrag ng-click="toggle(this)"><span class="fa" ng-class="{'fa-angle-down': collapsed, 'fa-angle-right': !collapsed}"></span></a>
                            {{node.title}}

                        </div>
                        <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
                            <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
                            </li>
                        </ol>
                    </script>
                    <div ui-tree id="tree-root">
                        <ol ui-tree-nodes ng-model="data">
                            <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        Data binding
                    </h5>
                </div>
                <div class="ibox-content">
                    <pre>{{ data | json }}</pre>
                    </div>
                </div>
        </div>
    </div>
</div>
<style>
    .angular-ui-tree-handle {
        background: none repeat scroll 0 0 #f3f3f4;
        border: 1px dashed #e7eaec;
        color: inherit;
        padding: 10px;
        font-weight: normal;
    }
    .angular-ui-tree-handle:hover {
        font-weight: bold;
        cursor: pointer;
    }
    .angular-ui-tree-placeholder {
        background: #f0f9ff;
        border: 1px dashed #bed2db;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .group-title {
        background-color: #687074 !important;
        color: #FFF !important;
    }
    .tree-node {
        background: none repeat scroll 0 0 #f3f3f4;
        border: 1px dashed #e7eaec;
        color: inherit;
        padding: 10px;
        border-radius: 3px;
    }

    .tree-node .btn {
        min-width: 22px;
        margin-right: 4px;
    }

    .tree-node-content {
        margin: 5px 5px 5px 0;
    }

    .tree-handle {
        background: none repeat scroll 0 0 #f3f3f4;
        border: 1px dashed #e7eaec;
        color: inherit;
        padding: 10px;
    }

    .angular-ui-tree-handle:hover {
    }

    .angular-ui-tree-placeholder {
        background: #f0f9ff;
        border: 1px dashed #bed2db;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>