JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-controller="appCtrl">
  <ul><li ng-repeat="item in treeData">{{item.text}}<ul ng-tree="item"></ul></li></ul>
</div>

JavaScript

angular.module('components', []);

    angular.module('App', ['components']);

    angular.module('components')
        .directive('ngTree', function ($compile) {
            return {
                restrict: 'A',
                terminal: true,
                link: function (scope, element, attrs) {
                    var valueIdent = attrs.ngTree;
                    scope.$watch(valueIdent + ".items", function (newValue, oldValue) {

                        var item = scope.$eval(valueIdent);
                        if (this.eq === false) {
                            while (element.firstChild) {
                                element.removeChild(element.firstChild);
                            }
                            if (newValue != undefined) {
                                if (angular.isArray(item.items)) {
                                    element.append(
                                        '<li ng-repeat="item in parent.items">'
                                        + '{{item.text}}<button ng:click="addItems(item, true)">empty</button><button ng:click="addItems(item)">add additional</button>'
                                        + '<ul ng-tree="item"></ul>'
                                        + '</li>');
                                }
                                var childScope = scope.$new();
                                childScope["parent"] = item;
                                $compile(element.contents())(childScope);
                            }
                        }
                    });
                }
            }
        });



    function appCtrl($scope) {
        $scope.treeData = [{
            text: "root", items:
                [
                    {
                        text: "Furniture", items: [
                            { text: "Tables & Chairs", items: [{ text: "Small table", items: [{ text: "Smaller kind of small table" }] }] },
                            { text: "Sofas" },
      ...