how to select country state dropdown box in angularjs

Question

select in country automatically displayed in that states in drop down list using angularjs

suraj ghosi · Answer

use below code . i hope its helpful for you 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 type = text/javascript src = http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js > function CountryStateCityCtnl ( $ 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' ] } } ; $ scope . GetSelectedCountry = function ( ) { $ scope . strCountry = document . getElementById ( country ) . value ; } ; $ scope . GetSelectedState = function ( ) { $ scope . strState = document . getElementById ( state ) . value ; } ; } div ng - controller = CountryStateCityCtnl > div > Country : select id = country ng - model = statessource ng - options = country for (country states) in countries ng - change = GetSelectedCountry() > option value = '' > Select / option > / select > / div > div style = 'height: 15px;' > & nbsp ; / div > div > States : select id = state ng - disabled = !statessource ng - model = citiessource ng - options = state for (statecity) in statessource ng - change = GetSelectedState() > option value = '' > Select / option > / select > / div > div style = 'height: 15px;' > & nbsp ; / div > div > City : select id = city ng - disabled = !citiessource || !statessource ng - model = city > option value = '' > Select / option > option ng - repeat = city in citiessource value = '{{city}}' > { { city } } / option > / select > / div > div style = 'height: 15px;' > & nbsp ; / div > div > span > Selected Country : / span > label > { { strCountry } } / label > / div > div style = 'height: 15px;' > & nbsp ; / div > div > span > Selected State : / span > label > { { strState } } / label > / div > div style = 'height: 15px;' > & nbsp ; / div > div > span > Selected City : / span > label > { { city } } / label > / div > / div >

how to select country, state dropdown box in angularjs