JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp">
    <div ng-controller="TreeCtrl">
        <tree family="treeFamily"></tree>
    </div>
</div>

CSS

tree {
    margin-left: 20px;
    display: block;
}

JavaScript

var module = angular.module('myapp', []);

module.controller("TreeCtrl", function ($scope) {
    $scope.treeFamily = {
        name: "Parent",
        children: [{
            name: "Child1",
            children: [{
                name: "Grandchild1",
                children: []
            }, {
                name: "Grandchild2",
                children: []
            }, {
                name: "Grandchild3",
                children: []
            }]
        }, {
            name: "Child2",
            children: []
        }]
    };
});

module.directive("tree", function ($compile) {
    return {
        restrict: "E",
        scope: {
            family: '='
        },
        template:
            '<p ng-click="testme()">{{ family.name }}</p>' +
            '<ul>' +
            '<li ng-repeat="child in family.children">' +
            '<tree family="child"></tree>' +
            '</li>' +
            '</ul>',
        compile: function (tElement, tAttr) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function (scope, iElement, iAttr) {
                if (!compiledContents) {
                    compiledContents = $compile(contents);
                }
                compiledContents(scope, function (clone, scope) {
                    iElement.append(clone);
                });
                scope.testme = function () {
                    console.log('testme')
                };
            };
        }

    };
});