ng-options expression with key value

Question

I was trying to achieve cascading drop downs based on country , state , city found from the below links that i had attached and i was confusing with the regular expression for ng-options using array's and ng-option's with key value pair.

i have tried few examples that was from online to understand how ng-options work with below examples

https://gist.github.com/marlonbbernal/08451bdbcff5986bcb9a

http://embed.plnkr.co/vxgO1a/

i am confused with the below expression usages of ng-options :

link1 for ng-options :    

<select id="country" ng-model="statessource"  
         ng-options="country for (country, states) in countries"  
         ng-change="GetSelectedCountry()">
         <option value=''>Select</option>
</select>

  $scope.GetSelectedCountry = function () {
       $scope.strCountry = document.getElementById("country").value;           
  };

how to achieve the state directly in options ?..
Can any one please ,  explain how ng-option expression works. i will be 
monitoring this thread, actively !..

Answer 1

To explain your question, please first look at the variable:$scope.countries, its an object with (key,value) pair.

$scope.countries = {
                        'India': {
                            'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                            'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                            'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                        },
                        'USA': {
                            'Alabama': ['Montgomery', 'Birmingham'],
                            'California': ['Sacramento', 'Fremont'],
                            'Illinois': ['Springfield', 'Chicago']
                        },
                        'Australia': {
                            'New South Wales': ['Sydney'],
                            'Victoria': ['Melbourne']
                        }
                    };

The keys are 'India', 'USA' and 'Australia', For (key, value) pair you have a value for each key. For example, If you use

$scope.countries['India']

Then you will get

                        {
                            'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                            'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                            'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                        }

If you use

 $scope.countries['USA']

Then you will get:

                        {
                            'Alabama': ['Montgomery', 'Birmingham'],
                            'California': ['Sacramento', 'Fremont'],
                            'Illinois': ['Springfield', 'Chicago']
                        }

Now, consider your question:

<select id="country" ng-model="statessource"  
         ng-options="country for (country, states) in countries"  
         ng-change="GetSelectedCountry()">
         <option value=''>Select</option>
</select>

ng-options="country for (country, states) in countries" The country is key for the object and states are value, so you will see the list of country, and you can select string from the keys('India','USA','Australia') in combo. And if you select 'India', then following object:

                    {
                        'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                        'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                        'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                    }

will be saved in your statessource as scope variable, because you use the code ng-model="statessource".

And if you select 'USA', the following object will be stored in "statessource" varible.

                        {
                            'Alabama': ['Montgomery', 'Birmingham'],
                            'California': ['Sacramento', 'Fremont'],
                            'Illinois': ['Springfield', 'Chicago']
                        }

I just added the code you mentioned and added the line in the code: <div>{{states}}</div>. If you run the code and select the country, you can see the behavior. I just explain for country, you can understand states and city from the same explanation as they are similar.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Cascading Dropdowns in AngularJs :devzone.co.in </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script>
            function CountryCntrl($scope) {
                $scope.countries = {
                    'India': {
                        'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                        'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                        'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                    },
                    'USA': {
                        'Alabama': ['Montgomery', 'Birmingham'],
                        'California': ['Sacramento', 'Fremont'],
                        'Illinois': ['Springfield', 'Chicago']
                    },
                    'Australia': {
                        'New South Wales': ['Sydney'],
                        'Victoria': ['Melbourne']
                    }
                };
            }
        </script>
    </head>
    <body>
 
        <div ng-controller="CountryCntrl">
            <div>
                Country: 
                <select id="country" ng-model="states" ng-options="country for (country, states) in countries">
                    <option value=''>Select</option>
                </select>
                <div>{{states}}</div>
            </div>
            <div>
                States: <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states"><option value=''>Select</option></select>
            </div>
            <div>
                City: <select id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>        
            </div>
        </div>
 
    </body>
</html>

Hope it clears your question.