Angular Add To List From A Panel Add

I have the following angularjs 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. I would like to add

Solution 1:

Add a function to your scope to add the course:

$scope.addProgram = function(program) {
  $scope.programs[0].programstaken.push(program);
  $scope.display.addprogram = false;
}

Then, pass the program object created by ng-repeat to the addProgram function:

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Select <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="p in programs[0].programlist">
      <a ng-click="addProgram(p)">{{p.program}}</a>
    </li>
  </ul>
</div>

Here is a demo: http://plnkr.co/edit/1TGsgcHafJd4tisuM8Wo?p=preview

Note that display.addprogram = false was moved from ng-click to inside the function for clarity.