I have 2 select option box in my app. First select option box contains the name of Countries. I want to update second select option box value with respect to value selected in first select box.

For example, If I select India, than second select box value should contain all states of India. Similar for other countries also but I am not able to do so.

Code:

<select ng-model="selectedCountry" ng-options="item as item for item in country">
    <option ng-if="!selectedCountry" value="">Select Country</option>
</select>
<pre>selectedItem: {{selectedItem | json}}</pre>

<select ng-model="selectedState" ng-options="{{selectedState}}">
    <option ng-if="!selectedState" value="">Select state</option>
</select>
<pre>selectedItem: {{selectedState | json}}</pre>

JS:

$scope.country = [
         "India",
         "America",
        "Nepal",
         "China"
    ];
  $scope.India = ["Bihar"];
    $scope.America = ["Arizona"];
    $scope.China = ["Beging"];
    $scope.Nepal = ["Dhankuta"];

I have 2 select option box in my app. First select option box contains the name of Countries. I want to update second select option box value with respect to value selected in first select box.

For example, If I select India, than second select box value should contain all states of India. Similar for other countries also but I am not able to do so.

Code:

<select ng-model="selectedCountry" ng-options="item as item for item in country">
    <option ng-if="!selectedCountry" value="">Select Country</option>
</select>
<pre>selectedItem: {{selectedItem | json}}</pre>

<select ng-model="selectedState" ng-options="{{selectedState}}">
    <option ng-if="!selectedState" value="">Select state</option>
</select>
<pre>selectedItem: {{selectedState | json}}</pre>

JS:

$scope.country = [
         "India",
         "America",
        "Nepal",
         "China"
    ];
  $scope.India = ["Bihar"];
    $scope.America = ["Arizona"];
    $scope.China = ["Beging"];
    $scope.Nepal = ["Dhankuta"];

• javascript
• angularjs
• html

• Seems this questions was answered here: stackoverflow./questions/16991960/… – Jeroen de Lau Commented Dec 24, 2014 at 12:09
• No. I want to do it with angular, not with jquery. Your link is not so useful. – ng_developer Commented Dec 24, 2014 at 12:15
• My apologies, didn't see your tags. – Jeroen de Lau Commented Dec 24, 2014 at 12:46

3 Answers 3

You can make your countries the keys of an array like countries.india etc In second Select you can set ng-options to repeat from the countries key that matches selected option of selectedCountry in first select box. like if India is selected that will repeat through key 'india' of countries array

Demo

angular.module('test', [])
.controller('testController', function($scope) {
    $scope.country = [
        "India",
        "America",
        "Nepal",
        "China"
    ];
    $scope.countries = [];
    $scope.countries.India = ["Bihar", "mumbai"];
    $scope.countries.America = ["Arizona"];
    $scope.countries.China = ["Beging"];
    $scope.countries.Nepal = ["Dhankuta"];

});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testController">
  <select ng-model="selectedCountry" ng-options="item as item for item in country">
      <option ng-if="!selectedCountry" value="">Select Country</option>
  </select>
  <pre>selectedItem: {{selectedCountry}}</pre>

  <select ng-model="selectedState" ng-options="items for items in countries[selectedCountry]">
      <option ng-if="!selectedCountry" value="">Select Country</option>
  </select>
  <pre>selectedItem: {{selectedState }}</pre>
</div>

you should use ng-change property of select.

<select ng-change="changeStates()">...</select>

$scope.changeStates = function(){
    $scope['currentStates'] = $scope[$scope.selectedCountry];
};

<select ng-options="state as state for state in currentStates">...</select>

but in my humble opinion you should better use id values

Edit: and you shouldn't inject States into scope directly. scope.States.America will be better

I use the $watch function see the demo click here

 <body ng-app ng-controller="AppCtrl"> <select ng-model="selectedCountry" ng-options="item as item for item in country">
        <option value="">Select Country</option> </select> <pre>selectedItem: {{selectedCountry | json}}</pre>

    <select ng-model="selectedState" ng-options="item as item for item in state">
        <option ng-if="!selectedState" value="">Select state</option> </select> <pre>selectedItem: {{selectedState | json}}</pre> </body>

javascript:

function AppCtrl($scope) {

$scope.country = ["India", "America", "Nepal","China" ];
var state = {India :["Bihar"],America :["Arizona"],China:["Beging"],Nepal:["Dhankuta"]};
    $scope.$watch('selectedCountry', function(newValue, oldValue) {
      if ( newValue) {
      $scope.state = state[$scope.selectedCountry];
    }
  });
}