Angular Error In Loading Correct Children

I have the following angular app: plunker When the + next to the My academic course is clicked, it opens a new panel to get a list of courses to select from. Here when we click 'Ac

Solution 1:

Might not be the best solution but here is the link to plnkr.

EDIT: For subchildren: plnkr (from comment). This still has quite a few bugs (like: try clicking both checkboxes :D)

Here are my additions: Controller:

$scope.clickHandler = function (index) {
    $scope.currentProgram = $scope.programs[0].programlist[index];
};

View:

<ling-repeat="p in programs[0].programlist"data-spy="scroll" ><inputtype="checkbox"ng-click="display.addcourse = !display.addcourse; clickHandler($index)"value=""/>{{p.program}}
  </li>

  ...

    <divng-show="display.addcourse"class="col-lg-4 col-md-4 col-sm-4"><divclass="panel panel-info"><ulclass="list-group"role="menu"><ling-repeat="p in currentProgram.children"data-spy="scroll"class="list-group-item"><ang-click="display.addcoursedescription = true" >{{p.course}}</a></li></ul></div></div>