My problem is that the switch breaks the initial value of the select. It causes the select to show a blank initial option
*Note: I use more switch pages in my own program, I just deleted them here to simplify the problem. I also have to use switch, replacing it with routes is not an option.
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-switch="Page" ng-init="Page = 4">
<div ng-switch-when="4">
<select ng-model="City" ng-init="City=0" ng-change="Suburb=0">
<option ng-value="0" disabled="disabled">---City---</option>
<option>City 1</option>
<option>City 2</option>
</select>
<br><br>
<select ng-model="Suburb" ng-init="Suburb=0">
<option ng-value="0" disabled="disabled">---Course---</option>
<option ng-show="City == 'City 1'">City 1: Suburb 1</option>
<option ng-show="City == 'City 1'">City 1: Suburb 2</option>
<option ng-show="City == 'City 2'">City 2: Suburb 1</option>
<option ng-show="City == 'City 2'">City 2: Suburb 2</option>
</select>
</div>
</div>
</body>
</html>
