JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp">
    <div ng-controller="HomeCtrl">
    <ul class="nav navbar-nav">
          <li ng-repeat="menu in menus">
            <a href ng-click="headerCtrl.go(menu)">{{menu.displayName}}</a>
            <recursive-menu-tree menu="menu"></recursive-menu-tree>
          </li>
        </ul>
    </div>
</div>

JavaScript

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

app.factory('RecursionHelper', ['$compile', function($compile){
    return {
        /**
         * Manually compiles the element, fixing the recursion loop.
         * @param element
         * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
         * @returns An object containing the linking functions.
         */
        compile: function(element, link){
            // Normalize the link parameter
            if(angular.isFunction(link)){
                link = { post: link };
            }

            // Break the recursion loop by removing the contents
            var contents = element.contents().remove();
            var compiledContents;
            return {
                pre: (link && link.pre) ? link.pre : null,
                /**
                 * Compiles and re-adds the contents
                 */
                post: function(scope, element){
                    // Compile the contents
                    if(!compiledContents){
                        compiledContents = $compile(contents);
                    }
                    // Re-add the compiled contents to the element
                    compiledContents(scope, function(clone){
                        element.append(clone);
                    });

                    // Call the post-linking function, if any
                    if(link && link.post){
                        link.post.apply(null, arguments);
                    }
                }
            };
        }
    };
}]);

app.directive('recursiveMenuTree', ['RecursionHelper', function(RecursionHelper) {
  
    var directive = {};
    directive.restrict = 'E';
    directive.scope = {
      menu : '='
    };
    directive.template = '<ul class=""><li ng-repeat="menu in menu.submenus"><a href ng-click="headerCtrl.go(menu)">{{menu.displayName}}</a><recursive-menu-tree menu="menu"></recursive-menu-tree></li></ul>';
    
   ...