JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.angularjs.org/1.2.23/angular.js"></script>
<div ng-controller="MyCtrl">
Hello, {{name}}!
<br><br>
Countries:<br>
{{countries}}
<br><br>
States:<br>
{{states}}
<br><br>
Select your country:<br>
<select ng-model="userCountry" ng-options="country.name for country in countries track by country.name">
</select>
<br><br>
Select your state:<br>
<select ng-model="userState" ng-options="state.name for state in states track by state.name | filter: {state.country.code:userCountry.code}">
</select>
<br><br>
Selected Country:<br>
{{userCountry}}
<br><br>
Selected State:<br>
{{userState}}
</div>
JavaScript
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.name = 'Test App';
$scope.countries = [];
$scope.states = [];
$scope.userState = new Object();
$scope.userCountry = new Object();
function init() {
// Countries
$scope.countries.push({
"code": "BRA",
"name": "Brasil"
});
$scope.countries.push({
"code": "USA",
"name": "United States"
});
// 2 brazilian states
$scope.states.push({
"code": "SC",
"name": "Santa Catarina",
"country": {
"code": "BRA",
"name": "Brazil"
}
});
$scope.states.push({
"code": "RR",
"name": "Roraima",
"country": {
"code": "BRA",
"name": "Brazil"
}
});
// 2 american states
$scope.states.push({
"code": "AL",
"name": "Alabama",
"country": {
"code": "USA",
"name": "United States"
}
});
$scope.states.push({
"code": "FL",
"name": "Florida",
"country": {
"code": "USA",
"name": "United States"
}
});
}
init();
}