AngularJS Example:

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <div ng-app>
    <script type="text/ng-template" id="menu-renderer">
        {{item.title}}    
        <ul ng-if="item.subMenu && item.subMenu.length > 0" class="list-group">
            <li class="list-group-item" ng-repeat="item in item.subMenu" ng-include="'menu-renderer'"></li>
        </ul>
    </script>
       
      <div ng-controller="MenuCtrl">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="item in subMenu" ng-include="'menu-renderer'"></li>
        </ul>
      </div>
    </div>

JavaScript

function MenuCtrl($scope) {
$scope.subMenu = [
{
    title: "User Manual",
    subMenu: [
    {
        title: "Title one",
        link: "index/titleone.html",
        icon:"fa fa-caret-down",
        subMenu: []
    },
    {
        title: "Basic",
        link: "index/basic/basic.html",
        icon:"fa fa-caret-down",
        subMenu: [
        {
            title: "Basic Function",
            link: "index/basic/function.html",
            icon:"fa fa-caret-down",
            subMenu: []
        }]  
    }]
}];
}