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 : "Menu",
        children: [{
            name : "Level1",
            children: [{
                name : "Link2",
                children: []
            },{
                name : "Level2",
                children: [{
                	name: "Link3",
                  children: []
                },{
                	name: "Level3",
                  children: []
                }]
            }]
        }]
    };
});

module.factory('RecursionHelper', ['$compile', function($compile){
    var RecursionHelper = {
        compile: function(element){
            var contents = element.contents().remove();
            var compiledContents;
            return function(scope, element){
                if(!compiledContents){
                    compiledContents = $compile(contents);
                }
                compiledContents(scope, function(clone){
                    element.append(clone);
                });
            };
        }
    };

    return RecursionHelper;
}]);

module.directive("tree", function(RecursionHelper) {
    return {
        restrict: "E",
        scope: {family: '='},
        template: 
            '<p>{{ family.name }}</p>'+
            '<ul>' + 
                '<li ng-repeat="child in family.children">' + 
                    '<tree family="child"></tree>' +
                '</li>' +
            '</ul>',
        compile: function(element) {
            return RecursionHelper.compile(element);
        }
    };
});