Recursive directive in angular js

Question

I created a custom directive.

angular.module('menu',[])
    .directive('Menu',function(){
        return{
            restrict:'E',
            replace:'true',
            scope:{
                menuList:'=',
                id:'@',
                parentId:'@'
            },
            controller:function($scope){       
            },
            template: `
                <div ng-repeat="menuItem in menuList">
                    <a>{{menuItem.longDescription}}</a>
                    <div ng-if="menuItem.child.size() > 0 ">
                      <menu menu-list="menuItem.child" 
                            id="menuItem.optionGroupId"
                            parent-id="menuItem.parentOptionGroupId">
                      </menu>
                    </div>
                </div>
            `                
        }
    })

Menu items can have child list and if child list exist it should make menu recursively, but recursion is not happening.

Answer 1

(function() {
  angular.module("menuTest", [])
    .controller('testCtrl', function($scope) {
      $scope.menu = [{
          id: 1,
          children: [{
            id: 3
          }]
        },
        {
          id: 2,
          children: [{
              id: 4
            },
            {
              id: 5
            }
          ]
        }
      ];
    })
    .directive("menu", function() {
      return {
        restrict: "E",
        replace: true,
        scope: {
          menuList: '='
        },
        template: '<div ng-repeat="menuItem in menuList">{{menuItem.id}}<div ng-if="menuItem.children && menuItem.children.length>0" ><menu menu-list="menuItem.children"></menu></div><div>'
      }
    })
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="menuTest" ng-controller="testCtrl">
  <menu menu-list="menu"></menu>
</div>