JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-controller='TravelController' ng-init='init()'>
Countries
<div ng-repeat='i in countries'>
<input type=radio ng-model='$parent.TravelToCountryId'
name='TravelToCountryId'
ng-init='filterCitiesByCountry()'
ng-change='filterCitiesByCountry()' value='{{i.CountryId}}' /> {{i.CountryName}}
</div>
<br/>
Cities <select id='TravelToCityId'
ng-model='TravelToCityId'
ng-options='i.CityId as i.CityName for i in citiesFromSelectedCountry'
></select>
<hr/>
Travel To <br/>
Country Id: {{TravelToCountryId}} <br/>
City Id: {{TravelToCityId}} <br/>
<br/><br/>
</div>
JavaScript
function TravelController($scope) {
// Models
$scope.countries =
[
{
CountryId: 1, CountryName: 'Philippines',
Cities :
[
{ CityId: 1, CityName: 'Manila' },
{ CityId: 2, CityName: 'Makati' },
{ CityId: 3, CityName: 'Quezon' },
]
},
{
CountryId: 2, CountryName: 'Canada',
Cities:
[
{ CityId: 4, CityName: 'Toronto' },
{ CityId: 5, CityName: 'Alberta' },
{ CityId: 6, CityName: 'Winnipeg' },
]
},
{
CountryId: 3, CountryName: 'China',
Cities:
[
{ CityId: 7, CityName: 'Beijing' },
{ CityId: 8, CityName: 'Shanghai' }
]
},
];
$scope.TravelToCountryId = null;
$scope.TravelToCityId = null;
// Controller's actions
$scope.init = function() {
$scope.TravelToCountryId = $scope.countries[1].CountryId;
};
$scope.filterCitiesByCountry = function() {
var cities = $scope.citiesFromSelectedCountry = $scope.countries.filter(function(v){
return v.CountryId == $scope.TravelToCountryId;
})[0].Cities;
$scope.TravelToCityId = cities[0].CityId;
};
}