AngularJS cascading dropdown first option disappearing in IE9

Question

I am trying to create a cascading dropdown with AngularJS where the option selected in the first dropdown dictates what options are shown in the second dropdown menu.

In Chrome, I have everything working as expected, where the default options "Select a state" and "Select a city" are shown in the dropdowns both before and after a state is selected. In IE9 however, the cascading functionality is working, but my initial "Select a state" and "Select a city" options do not appear. Can anyone help point me in the right direction? Thanks.

Here is my code and snippet (works correctly in Chrome, shows blank defaults in IE9):

 (function () { var app = angular.module('myApp', []); app.controller('DefinitionController', ['$http', function ($http) { var definition = this; definition.state = {}; definition.city = {}; definition.states = ["AL", "AR", "AZ", "CA", "CO", "CT"]; definition.cities = []; definition.GetCities = function (state) { //This will be replaced with an ajax call later if (state == "AL") definition.cities = ["Birmingham"]; if (state == "AR") definition.cities = ["Little Rock"]; if (state == "AZ") definition.cities = ["Tucson"]; if (state == "CA") definition.cities = ["Los Angeles"]; if (state == "CO") definition.cities = ["Denver"]; if (state == "CT") definition.cities = ["Hartford"]; }; }]); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <fieldset ng-controller="DefinitionController as definition"> <select class="form-control" ng-model="definition.state" ng-options="state for state in definition.states" ng-change="definition.GetCities(definition.state)"> <option value>Select a state</option> </select> <select class="form-control" ng-model="definition.city" ng-options="city for city in definition.cities"> <option value>Select a city</option> </select> </fieldset> </div> 

Answer 1

Found my mistake. When hardcoding the default , i needed to assign it a value. So instead of:

<option value>Select a state</option>

I needed:

<option value="">Select a state</option>

And the working snippet:

 (function () { var app = angular.module('myApp', []); app.controller('DefinitionController', ['$http', function ($http) { var definition = this; definition.state = {}; definition.city = {}; definition.states = ["AL", "AR", "AZ", "CA", "CO", "CT"]; definition.cities = []; definition.GetCities = function (state) { //This will be replaced with an ajax call later if (state == "AL") definition.cities = ["Birmingham"]; if (state == "AR") definition.cities = ["Little Rock"]; if (state == "AZ") definition.cities = ["Tucson"]; if (state == "CA") definition.cities = ["Los Angeles"]; if (state == "CO") definition.cities = ["Denver"]; if (state == "CT") definition.cities = ["Hartford"]; }; }]); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <fieldset ng-controller="DefinitionController as definition"> <select class="form-control" ng-model="definition.state" ng-options="state for state in definition.states" ng-change="definition.GetCities(definition.state)"> <option value="">Select a state</option> </select> <select class="form-control" ng-model="definition.city" ng-options="city for city in definition.cities"> <option value="">Select a city</option> </select> </fieldset> </div>