Cascading dropdown with AngularJS

by Maria Ines Parnisari

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>
            <select name='country' id="country" class="form-control" ng-model="country" ng-options="country 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 = {};
    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
    }];
    var allCities = [{
        Id: 1,
        CityName: "Washington DC",
        StateId: 1
    }, {
        Id: 2,
        CityName: "New York City",
        StateId: 2
    }, {
        Id: 3,
        CityName: "Brisbane",
        StateId: 3
    } ];

    $scope.countries = allCountries;

    $scope.$watch('country', function () {
        $scope.states = allStates.filter(function (s) {
            return s.CountryId == $scope.country.Id;
        });
        $scope.city = {};
        $scope.state = {};
        $scope.cities = [];
    });

    $scope.$watch('state', function () {
        $scope.cities = allCities.filter(function (c) {
            return c.StateId == $scope.state.Id;
        });
        $scope.city = {};
    });
}