Cascading DropDown List in AngularJS

  1. <!DOCTYPE html>  
  2. <html ng-app="app">  
  3.     <head>  
  4.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>  
  5.         <script>  
  6. angular.module("app", [])  
  7. .controller("myCtrl",function($scope){  
  8. $scope.County = [  
  9. { CountyName: 'India', countyNumber: '01' },  
  10. { CountyName: 'US', countyNumber: '02' },  
  11. { CountyName: 'UK', countyNumber: '03' }  
  12. ];  
  13. $scope.Municipality = [  
  14. { MunicipalityName: 'Mumbai', MunicipalityNumber: '01' },  
  15. { MunicipalityName: 'Newyork', MunicipalityNumber: '02' },  
  16. { MunicipalityName: 'London', MunicipalityNumber: '03' }  
  17. ];  
  18. $scope.featuretype = [  
  19. { type: 'County', data:$scope.County, displayName:'CountyName' },  
  20. { type: 'Municipality', data:$scope.Municipality, displayName:'MunicipalityName'}  
  21. ];  
  22. });  
  23. </script>  
  24.     </head>  
  25.     <body>  
  26.         <div ng-app="app">  
  27.             <div ng-controller="myCtrl">  
  28. Select a Country or Municipality:  
  29.                 <select id="FeatureTypeDropdown" ng-model="option1" ng-options="ft as ft.type for ft in featuretype">  
  30.                     <option value="">Select</option>  
  31.                 </select>  
  32.                 <select id="Select1" ng-model="county" ng-options="c as c[option1.displayName] for c in option1.data">  
  33.                     <option value="">Select</option>  
  34.                 </select>  
  35.             </div>  
  36.         </div>  
  37.     </body>  
  38. </html>  
Output: AS soon as we select from the first dropdown (Select a Country or Municipality:) the country names or Municipality name will be populated in the second dropdown.