Please refer to this plunkr, plunkr WHat I want is
If I click of Reading Korean then it should display its nested part i.e. Vowels,Consonants,Simple Words,Harder Words
angular.module('Tutorials', []).controller('getAnswers', function ($scope, $element) {
$scope.sectionNumber = 0;
$scope.tutorialNumber = 0;
$scope.questionNumber = 0;
$scope.sections = sections;
$scope.loadFromMenu = function (tut) {
alert(tut);
if (tut === $scope.tutorialNumber && tut !== 0) {
return;
} //if clicked on already playing tut
if (tut !== undefined) {
$scope.tutorialNumber = tut;
}
var section = sections[$scope.sectionNumber];
for (var i in section.tutorials) {
section.tutorials[i].active = "inactive";
}
section.active = "active";
section.tutorials[$scope.tutorialNumber].active = "active";
$scope.$apply();
$scope.questionNumber = 0;
if ($scope.sectionNumber === 1){
conjugationController();
}
};
});
var sections = [{
active: "inactive",
name: "Reading Korean",
romanizeService: "http://www.kawa.net/works/ajax/romanize/romanize.cgi?q=%ED%96%88%EB%8B%A4?&mode=hangul",
tutorials: [{
active: "inactive",
name: "Vowels"
},{
active: "inactive",
name: "Consonants"
},{
active: "inactive",
name: "Simple Words"
},{
active: "inactive",
name: "Harder Words"
}]
},{
active: "inactive",
name: "Conjugations",
tutorials: [{
active: "inactive",
name: "ㅗ and ㅏ regular",
verbs: ["작다", "놀다", "닦다"]
}, {
active: "inactive",
name: "ㅜ, ㅓ and ㅣ regular",
verbs: ["�?다", "울다", "멀다"]
}, {
active: "inactive",
name: "ㅏ and ㅓ reductive"
}, {
active: "inactive",
name: "ㅗ and ㅜ reductive"
}, {
active: "inactive",
name: "ㅣ reductive"
}]
}, {
active: "inactive",
name: "Sentence Building",
tutorials: [{
active: "inactive",
name: "Particles"
}, {
active: "inactive",
name: "Word Order"
}]
}];<!DOCTYPE html>
<html ng-app="Tutorials">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script-ng.js"></script>
</head>
<body ng-controller="getAnswers">
<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
<li class="section_title {{section.active}}" >
{{section.name}}
</li>
<ul>
<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">
{{tutorial.name}}
</li>
</ul>
</ul>
</body>
</html>And similar to remaining two Conjugations and Sentence Building. Until and unless I dont click it shoudnt show its nested array
