AngularJS select box options disappear when an item is selected

Question

I have created a select box bound to a model using Angularjs. The select box options load correctly but as soon as select any single option all options disappear from the select

Answer 1

The problem is that the ng-model on your select element overwrites the $scope.appointments array as soon as an item is selected. Use a different scope property for your ng-model value.

Here's an updated plunker: http://plnkr.co/edit/EAExby

The changes to your template would be:

<div ng-controller="ClinicCtrl">
  <select
    ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments"
    ng-model="selectedAppointment"
  ></select>
  {{selectedAppointment}} <!-- log out the value just to show it's working -->
</div>