acha-framework/src/frontend/core/scripts/directives/tree/tree-container.html

is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...

<ul class="{{::isRoot?'tree-root-container':''}} tree-container">
    <li ng-repeat="node in items"
        class="tree-node {{node.expanded ? 'expanded' : ''}}">
        <div class="active {{node.selected?'selected':''}}">
            <span ng-click="vm.onExpand(node, $event)" class="child-info">
                <i ng-if="!node.waiting" class="af-icon {{vm.getNodeIcon(node)}}"></i>
            </span>
            <span ng-click="vm.onPick(node, $event)" class="node-info">
                <i ng-if="!node.waiting" class="af-icon {{vm.getNodeClass(node)}}"></i>
                <i ng-if="node.waiting" class="fa fa-spinner fa-spin"></i>
                <span class="node-text">
                    {{::node.title|textOrTranslate:node.titleTranslate}}
                </span>
            </span>
        </div>
        <tree-container ng-if="node.expanded && node.items && node.items.length"
                        uuid="uuid"
                        is-root="false"
                        parent="node"
                        items="node.items"></tree-container>
    </li>
</ul>