Dynamic menu using AngularJS and JSON

Question

I am trying to create a dynamic menu in Angularjs using below JSON.

[{
  "Name": "Lesson 1",
  "path": "course/1.html",
  "topic": [{
    "Name": "Topic 1",
    "path": "course/2.html",
    "subtopic": []
  }, {
    "Name": "Topic 2",
    "path": "course/1.html",
    "subtopic": [{
      "Name": "SubTopic 21",
      "path": "course/2.html"
    }, {
      "Name": "SubTopic 22",
      "path": "course/1.html"
    }, {
      "Name": "SubTopic 23",
      "path": "course/2.html"
    }, {
      "Name": "SubTopic 24",
      "path": "course/1.html"
    }]
  }]
}, {
  "Name": "Lesson 2",
  "path": "course/1.html",
  "topic": [{
    "Name": "Topic 1",
    "path": "course/2.html",
    "subtopic": []
  }, {
    "Name": "Topic 2",
    "path": "course/1.html",
    "subtopic": [{
      "Name": "SubTopic 21",
      "path": "course/2.html"
    }, {
      "Name": "SubTopic 22",
      "path": "course/1.html"
    }]
  }]
}]

I have Lesson, Topic(Sub Menu) and Subtopic(Super sub menu). Submenu should get visible once the user clicks on related $index main menu. Please help.

MY WORK

<ul class="absolutes">
    <li ng-click="alert($index)" ng-repeat="x in lessonArray" ng-show="myVar" >
        <ul style="margin-top: 2px; cursor: pointer;" > {{x.Name}}
            <li ng-click="alert3($index)" ng-repeat="topic in x.topic" class="myClasss" " ng-show="myVar2" > 
{{topic.Name}}
                <ul>
                    <li ng-repeat="subtopic in topic.subtopic" class="myClasss" " ng-show="myVar3">{{subtopic.Name}}</li> 
                </ul>
            </li> 
        </ul> 
    </li> 
</ul>

Answer 1

angular.module('app', [])
.controller('MyController', ['$scope', function($scope) {
    $scope.menus = [{
      "Name": "Lesson 1",
      "path": "course/1.html",
      "topic": [{
        "Name": "Topic 1",
        "path": "course/2.html",
        "subtopic": []
      }, {
        "Name": "Topic 2",
        "path": "course/1.html",
        "subtopic": [{
          "Name": "SubTopic 21",
          "path": "course/2.html"
        }, {
          "Name": "SubTopic 22",
          "path": "course/1.html"
        }, {
          "Name": "SubTopic 23",
          "path": "course/2.html"
        }, {
          "Name": "SubTopic 24",
          "path": "course/1.html"
        }]
      }]
    }, {
      "Name": "Lesson 2",
      "path": "course/1.html",
      "topic": [{
        "Name": "Topic 1",
        "path": "course/2.html",
        "subtopic": []
      }, {
        "Name": "Topic 2",
        "path": "course/1.html",
        "subtopic": [{
          "Name": "SubTopic 21",
          "path": "course/2.html"
        }, {
          "Name": "SubTopic 22",
          "path": "course/1.html"
        }]
      }]
    }]
}]);

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller="MyController">
 <ul>
   <li ng-repeat='menu1 in menus' ng-click='show1=!show1' ng-style='{cursor:menu1.topic.length>0?"pointer":"default"}'>
     {{menu1.Name}}
     <ul ng-if='show1'>
       <li ng-repeat='menu2 in menu1.topic' ng-click='show2=!show2;$event.stopPropagation();' ng-style='{cursor:menu2.subtopic.length>0?"pointer":"default"}'>
         {{menu2.Name}}
         <ul ng-if='show2' ng-click='$event.stopPropagation();' style='cursor:default'>
           <li ng-repeat='menu3 in menu2.subtopic'>
             {{menu3.Name}}
           </li>
         </ul>    
       </li>
     </ul>    
   </li>
 </ul>
</div>