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:

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

  ...

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