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 box. What is the reason this is occuring and how do I keep my options from disappearing?

Plunker link demonstrating the issue: http://plnkr.co/edit/DolBIN

HTML

<html xmlns="http://www.w3.org/1999/xhtml"  ng-app>
  <head>
      <title>Angular Test Prjoect - Home</title>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
      <script type="text/javascript" src="Clinic.js"></script>
  </head>
  <body>
        <div ng-controller="ClinicCtrl">
          <select  ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments" ng-model="appointments">
          </select>
        </div>
  </body>
</html>

JavaScript

function ClinicCtrl($scope) {
    $scope.appointments = [
        { start: "900", end: "930", provider: "1", patient: {name:"Allen",dob:"8/12/1977"} },
        { start: "1000", end: "1045", provider: "1", patient: { name: "Allen", dob: "8/12/1971"} },
        { start: "1030", end: "1100", provider: "2", patient: { name: "David", dob: "11/22/1973"} },
        { start: "1100", end: "1145", provider: "2", patient: { name: "Francine", dob: "3/18/1987"} },
        { start: "1230", end: "1530", provider: "3", patient: { name: "George", dob: "4/5/1997"} },
        { start: "1300", end: "1500", provider: "3", patient: { name: "Kirkman", dob: "6/28/1970"} }
    ];
}

+1, I didn't know you could do something like this: item.start + '-' + item.end + ':' + item.patient.name for the select list labels. — Mark Rajcok

Noah Freitas Noah Freitas · Accepted Answer · 2013-04-04T16:24:24

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>

AngularJS select box options disappear when an item is selected

1 Answers