JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <treeview></treeview>
</div>

CSS

ul
{
    background: yellow;
}

li
{
    background: green;
}

JavaScript

var module = angular.module("test", []);
module.directive('treeview', function () {
    return {
        restrict: 'E',
        template: '<div class="sl-treeview"><ul class="clear" ng-transclude><treeview-item ng-repeat="item in items" item="item"></treeview-item></ul></div>',
        replace: true,
        transclude: true,
        scope: {},
        link: function (scope, element, attrs) {
            console.log("treeview directive loaded");
        },
        controller: function ($scope, $rootScope) {
            $rootScope.depth = 0;
            $scope.items = [
                { text: "face" },
                { text: "palm" },
                {
                    text: "cake",
                    childitems: [
                        { text: "1 face" },
                        { text: "1 palm" },
                        { text: "1 cake" }
                    ]
                }
            ];
        }
    };
});

module.directive('treeviewItem', function () {
    return {
        restrict: 'E',
        template: '<li><i class="icon-plus-sign"></i><a href="/"><i class="icon-folder-close"></i>{{item.text}}</a><ul><treeview-item ng-repeat="childitem in item.childitems" item="childitem"></treeview-item></ul></li>',
        replace: true,
        scope: {
            item: "="
        },
        link: function (scope, element, attrs) {
            console.log("treeview item directive loaded");
        }
    };
});