$watch cascade dropdown select menu angular with JSON feed functions by andrew pougher

$watch cascade dropdown select menu angular with JSON feed functions by andrew pougher

by Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.0.js"></script>
<div ng-app="DDLcascadeANDREWPOUGHER" class="container-fluid">
<h2>
Choose Geo
</h2>
  <div ng-controller="CountryContrl"  class="row">
    <div>
      Country:
      <select id="country" ng-model="country" ng-options="country for country in countries" class="form-control">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      State / Provinces:
      <select id="state" ng-disabled="!states" ng-model="state" ng-options="state for state in states" class="form-control">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      Ciry or Suburb:
      <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities" class="form-control">
        <option value=''>Select</option>
      </select>

    </div>

  </div>

</div>

JavaScript

angular.module('DDLcascadeANDREWPOUGHER', [])
    .controller('CountryContrl', ['$scope', function($scope) {
      $scope.countries = ['china', 'united states'];
      $scope.$watch('country', function(newVal) {
        if (newVal === 'china')
          $scope.states = ['BeiJing', 'ShangHai'];
        if (newVal === 'united states')
          $scope.states =  $scope.getusa();
      });
      $scope.$watch('state', function(newVal) {
        if (newVal === 'ShangHai')
          $scope.cities = $scope.getlocas();
        if (newVal === 'BeiJing')
          $scope.cities = ['HaiDian', 'TianAnMen'];
        if (newVal === 'Florida')
          $scope.cities = ['Key West', 'Cape Canaveral'];
        if (newVal === 'Chicago')
          $scope.cities = ['Mundelein', 'Skokie'];
      });
      
      $scope.getlocas = function(){
      return ['JiaDing', 'HongQian', 'PuDong'];
      }
      
       $scope.getusa = function(){
     $scope.mystates = [
    {
        "name": "Alabama",
        "abbr": "AL"
    },
    {
        "name": "Alaska",
        "abbr": "AK"
    },
    {
        "name": "American Samoa",
        "abbr": "AS"
    },
    {
        "name": "Arizona",
        "abbr": "AZ"
    },
    {
        "name": "Arkansas",
        "abbr": "AR"
    },
    {
        "name": "California",
        "abbr": "CA"
    },
    {
        "name": "Colorado",
        "abbr": "CO"
    },
    {
        "name": "Connecticut",
        "abbr": "CT"
    },
    {
        "name": "Delaware",
        "abbr": "DE"
    },
    {
        "name": "District Of Columbia",
        "abbr": "DC"
    },
    {
        "name": "Federated States Of Micronesia",
        "abbr": "FM"
    },
    {
        "name": "Florida",
        "abbr": "FL"
    },
    {
        "name": "Georgia",
        "abbr": "GA"
    },
    {
        "name": "Guam",
        "abbr": "GU"
    },
    {
        "name": "Hawaii",
        "abbr": "HI"
    },
    {
        "name": "Idaho",
        "abbr": "ID"
    },
    {
       ...