Cascading dropdown with AngularJS

by Bhabani Raju

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="country.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="state" 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>
         <div class="form-group">
            <label for="typeof" class="control-label">typeof</label>
            <input type="text" value = {{state.value}} ng-model="state.value" disabled>
        </div>
        <button class="btn btn-primary" ng-disabled='!city.Id' type="button">Create</button>
    </form>
    <p>Selected country: {{country.value}} - {{country.CountryName}}</p>
    <p>Selected state: {{state.value}} - {{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: "smo",
        value:"us"
    }, {
        Id: 2,
        CountryName: "sco",
        value:"aus"
    }, {
        Id: 3,
        CountryName: "pm",
        value:"aus"
    }];
    var allStates = [{
        Id: 1,
        StateName: "Twitter",
        CountryId: 1,
        value:"tw"
    }, {
        Id: 2,
        StateName: "Linkedin Showcase",
        CountryId: 1,
        value:"ins"
    },{
        Id: 3,
        StateName: "Instagram",
        CountryId: 1,
        value:"inst"
    },{
        Id: 4,
        StateName: "Google Plus",
        CountryId: 1,
        value:"gp"
    },
    
    {
        Id: 5,
        StateName: "Facebook",
        CountryId: 1,
        value:"fb"
    },
    {
        Id: 6,
        StateName: "sociable",
        CountryId: 1,
        value:"socb"
    },
    
    
    {
        Id: 1,
        StateName: "Twitter",
        CountryId: 2,
        value:"twtr"
    },
    {
        Id:2,
        StateName: "Linkedin",
        CountryId: 2,
        value:"lnk"
    },
    {
        Id: 3,
        StateName: "Facebook",
        CountryId: 2,
        value:"fb"
    },
    {
        Id: 4,
        StateName: "Instagram",
        CountryId: 2,
        value:"inst"
    },
    {
        Id: 1,
        StateName: "Madison logic Google",
        CountryId: 3,
        value:"ml"
    },
    {
        Id: 2,
        StateName: "Remarketing",
        CountryId: 3,
        value:"grm"
    },
    {
        Id: 3,
        StateName: "Programmatic",
        CountryId: 3,
        value:"pgm"
    },
    {
        Id: 4,
        StateName: "Demand Base",
        CountryId: 3,
        value:"dbe"
    },
    {
        Id: 5,
        StateName: "Wall street journal",
        CountryId: 3,
        value:"wsj"
    },
    {
        Id: 6,
        StateName: "Integrate",
        CountryId: 3,
       ...