Here the simple AngularJS tutorial on creating Cascading DropDownList with Angular JS.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function CountryController($scope) {
$scope.countries = {
'India': {
'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],
},
'USA': {
'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
'Los Angeles': ['Burbank', 'Hollywood']
},
'Australia': {
'New South Wales': ['Sydney','Orange','Broken Hill'],
'Victoria': ['Benalla','Melbourne']
}
};
}
</script>
</head>
<body>
<div ng-app class="container">
<div ng-controller="CountryController">
<div class="form-group">
<label class="control-label" for="Country">Country:</label>
<select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
<option value=''>Select</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="States">States:</label>
<select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
<option value=''>Select</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="City">City:</label>
<select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
<option value=''>Select</option>
</select>
</div>
</div>
</div>
</body>
</html>