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.directive('recursiveMenuTree', function($compile) {
  
    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>';
    
    directive.compile = function(tElement, tAttrs) {
      var contents = tElement.contents().remove();
      var compiledContents;
      return {
        post : function(scope, iElement, iAttr) {
          console.log(scope.menu);
          if(!compiledContents){
            compiledContents = $compile(contents);
          }
          var element = compiledContents(scope);
          tElement.append(element);
        }
      };
    };

    return directive;
});

app.controller('HomeCtrl', function($scope) {
    $scope.menus = [
        {
            displayName : 'Home',
            submenus : [
                {
                    displayName: 'Menu item 1',
                    submenus : []
                },
                {
                    displayName: 'Menu item 2',
                    submenus : []
                },
                {
                    displayName: 'Menu item 3',
                    submenus : []
                }
            ]
        },
        {
            displayName : 'About us',
            submenus : []
        },
        {
            displayName : 'Contact us',
            submenus : []
        }
    ];
})