- <!DOCTYPE html>
- <html ng-app="app">
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
- <script>
- angular.module("app", [])
- .controller("myCtrl",function($scope){
- $scope.County = [
- { CountyName: 'India', countyNumber: '01' },
- { CountyName: 'US', countyNumber: '02' },
- { CountyName: 'UK', countyNumber: '03' }
- ];
- $scope.Municipality = [
- { MunicipalityName: 'Mumbai', MunicipalityNumber: '01' },
- { MunicipalityName: 'Newyork', MunicipalityNumber: '02' },
- { MunicipalityName: 'London', MunicipalityNumber: '03' }
- ];
- $scope.featuretype = [
- { type: 'County', data:$scope.County, displayName:'CountyName' },
- { type: 'Municipality', data:$scope.Municipality, displayName:'MunicipalityName'}
- ];
- });
- </script>
- </head>
- <body>
- <div ng-app="app">
- <div ng-controller="myCtrl">
- Select a Country or Municipality:
- <select id="FeatureTypeDropdown" ng-model="option1" ng-options="ft as ft.type for ft in featuretype">
- <option value="">Select</option>
- </select>
- <select id="Select1" ng-model="county" ng-options="c as c[option1.displayName] for c in option1.data">
- <option value="">Select</option>
- </select>
- </div>
- </div>
- </body>
- </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.