Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS select box options disappear when an item is selected
    text
    copied!<p>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?</p> <p>Plunker link demonstrating the issue: <a href="http://plnkr.co/edit/DolBIN">http://plnkr.co/edit/DolBIN</a></p> <p>HTML</p> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" ng-app&gt; &lt;head&gt; &lt;title&gt;Angular Test Prjoect - Home&lt;/title&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="Clinic.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-controller="ClinicCtrl"&gt; &lt;select ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments" ng-model="appointments"&gt; &lt;/select&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>JavaScript</p> <pre><code>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"} } ]; } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload