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>