How can I change a select option value when I change the value of another select option in AngularJS?

Question

I'm trying to change a select option value when I change the value of another select option in AngularJS. When I tried to do this on W3schools.com it worked, but in my development, it doesn't. The working code I tested is available here . https://www.w3schools.com/code/tryit.asp?filename=FD084OYCQJ6U

This is my AngularJS JavaScript.
Model is like this:

$scope.modelCountry = [ { ID : 1, Name : 'Philippines'}, { ID : 2, Name : 'United States'} ];
$scope.changeCountry = function (stateID) {
  if (stateID == 1) {
    //$scope.CountryName = "Philippines";
    return 'Philippines';
  }
  else if (stateID > 1) {
    //$scope.CountryName = "US United States";
    return 'United States';
  }
}

This is my HTML:

<div class="col-md-12 padding-top-5px"><!--State-->
  <div class="col-md-2"><span class="pull-right">State <b>*</b></span></div>
  <div class="col-md-3">
    <select class="form-control" ng-model="selectedState" ng-options="state.Name for state in modelState" ng-change="selectedCountryName=changeCountry(selectedState.ID)">
      <option value="">Select State</option>
    </select>
  </div>
</div><!-- End State-->
<div class="col-md-12 padding-top-5px"><!--Location-->
  <div class="col-md-2"><span class="pull-right">Country <b>*</b></span></div>
  <div class="col-md-3">
    <select class="form-control" ng-model="selectedCountryName" ng-options="country.Name for country in modelCountry">
      <option value="">Select Country</option>
    </select>
  </div>
</div><!-- End Location-->

Answer 1

I'm not sure what you are trying to do, but one of the normal use case of double select is changing the option list of second select when user change the selection of first select , as example below.

 angular.module('test', []).controller('Test', Test); function Test($scope) { $scope.types = [ { id: 1, name: 'fruits' }, { id: 2, name: 'vehicles' } ] var fruits = [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' } ] var vehicles = [ { id: 4, name: 'car' }, { id: 5, name: 'bus' }, { id: 6, name: 'lorry' } ] $scope.changeType = function() { $scope.selectedItem = 0; if ($scope.selectedType == 1) { $scope.items = fruits; } else if ($scope.selectedType == 2) { $scope.items = vehicles; } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <div ng-app='test' ng-controller='Test'> <select ng-model='selectedType' ng-options='type.id as type.name for type in types' ng-change='changeType()'> <option value="">Select type</option> </select> <select ng-model='selectedItem' ng-options='item.id as item.name for item in items'> <option value="">Select item</option> </select> </div>