Я пытаюсь сделать многоуровневый список из объекта, который содержит данные вложенности:

function linksRarrange($scope) {
    $scope.links = [
        {
            text: 'Menu Item 1',
            url: '#',
        },{
            text: 'Menu Item 2',
            url: '#',
            submenu: [
                {
                    text: 'Sub-menu Item 3',
                    url: '#',
                },{
                    text: 'Sub-menu Item 4',
                    url: '#',
                    submenu: [
                        {
                            text: 'Sub-sub-menu Item 5',
                            url: '#',
                        },{
                            text: 'Sub-sub-menu Item 6',
                            url: '#',
                        }
                    ]
                }
            ]
        },{
            text: 'Menu Item 3',
            url: '#',
        }
    ];
}

Почему при этом выводятся только первые 2 уровня меню и игнорируется третий?

    <a href="{{link.url}}">{{link.text}}</a>
        
            <a href="{{sublink.url}}">{{sublink.text}}</a>