JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<div ng-app='application' ng-controller="myController">
    <navigation menu="menu"></navigation>
</div>

JavaScript

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

angular.module("application").directive("navigation", [function () {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            menu: '='
        },
        template: '<ul><navigation-item ng-repeat="item in menu" submenu="item"></navigation-item></ul>',
        link: function ($scope, elem, attrs) {}
    }

}]);

angular.module("application").directive("navigationItem", [function () {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            submenu: '='
        },
        template: '<li>{{ submenu }}<navigation menu="submenu.Children"></navigation></li>',
        link: function ($scope, elem, attrs) {}
    }

}]);

app.controller('myController', ['$scope', function (ng) {
    ng.menu = [{
        Id: 1,
        Nome: "Contact",
        Children: [{
            Nome: "Testing",
            Children: []
        }]
    }];
}]);