Cascading dropdown with AngularJS

by sunil puvvada

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div ng-controller="Controller">
    <form class="form-inline" name="form">
        <div class="form-group">
            <label for="country" class="control-label">Country</label>
            {{userData.sunilKumar}}
            <select name='country' id="country" class="form-control" ng-model="userData.sunilKumar" ng-options="country.Id as country.CountryName for country in countries" required>
                <option value="" disabled>Select</option>
            </select>
        </div>
        <div class="form-group">
            <label for="state" class="control-label">State</label>
            <select name='state' required id="state" class="form-control" ng-disabled="states.length == 0" ng-model="state" ng-options="state as state.StateName for state in states">
                <option value="" disabled>Select</option>
            </select>
        </div>
        <div class="form-group">
            <label for="city" class="control-label">City</label>
            <select name='city' required id="city" class="form-control" ng-disabled="cities.length == 0" ng-model="city" ng-options="city as city.CityName for city in cities">
                <option value="" disabled>Select</option>
            </select>
        </div>
        <button class="btn btn-primary" ng-disabled='!city.Id' type="button">Create</button>
    </form>
    <p>Selected country: {{country.Id}} - {{country.CountryName}}</p>
    <p>Selected state: {{state.Id}} - {{state.StateName}}</p>
    <p>Selected state: {{city.Id}} - {{city.CityName}}</p>
</div>

JavaScript

function Controller($scope) {
    $scope.country = {};
    $scope.state = {};
    $scope.city = {};
    $scope.userData = [];
    var allCountries = [{
        Id: 1,
        CountryName: "USA"
    }, {
        Id: 2,
        CountryName: "Australia"
    }];
    var allStates = [{
        Id: 1,
        StateName: "Washington",
        CountryId: 1
    }, {
        Id: 2,
        StateName: "New York",
        CountryId: 1
    }, {
        Id: 3,
        StateName: "Queensland",
        CountryId: 2
    }]; 

    $scope.countries = allCountries;

    $scope.$watch('userData.sunilKumar', function () {
        $scope.states = allStates.filter(function (s) {
            return s.CountryId == $scope.userData.sunilKumar;
        }); 
    }); 
}