Recursive Menu with AngularJS

I'm developing an application in Angularjs for teaching purposes and I'm at the part of creating a recursive menu. I tried creating it with Angular JS, but I could not. As I know Javascript and Jquery, I decided to create it with these technologies, achieving success.

However, I still want to solve it with AngularJS and I ask for your help.

The code is this:

JS Code

 function getMenusByConcat(data) {
        var dom = '';
        for (var i = 0; i < data.length; i++) {
            dom += '<ul class="collapsible" data-collapsible="accordion">';
            if (data[i].children.length > 0) {
                dom += '<li class="bold">';
                dom += '<a class="collapsible-header  waves-effect waves-cyan">';
                dom += '<i class="material-icons">keyboard_arrow_right</i> <span>' + data[i].content + '</span>';
                dom += '</a>';
                dom += '<div class="collapsible-body">';
                dom += '<ul class="collapsible" data-collapsible="accordion">';
                dom += getMenusByConcat(data[i].children);
                dom += '</ul>';
                dom += '</div>';
                dom += '</li>';
            }
            else {
                dom += '<li>';
                dom += '<a href="' + data[i].href + '"><i class="' + data[i].iconClass + '"></i> <span>' + data[i].content + '</span></a>';
                dom += '</li>';
            }
            dom += '</ul>';
        }

        return dom;
    }

HTML code.

<ul ng-controller="Menu" id="menu" class="side-nav  fixed leftside-navigation"></ul>

Anyone handling AngularJS could show me how to do with Angularjs ?? Right away, I'm grateful.