AngularJS dynamic ng-option to link two drop downs

Question

Can anyone help me with a ng-option issue, I am trying to have ng-option created dynamically. What I am doing is pretty complex but I tried to explain it in following link

Answer 1

Like this?

Example

HTML

<div ng-controller="myCtrl">
    <select id="FeatureTypeDropdown" class="form-control input-sm" ng-model="option1" ng-options="ft as ft.type for ft in featuretype">
        <option value="">Select a Feature Type...</option>
    </select>
    <select id="Select1" class="form-control input-sm" ng-model="factory.geography.county" ng-options="c as c[option1.displayName] for c in option1.data" multiple>
        <option value="">Select a Feature...</option>
    </select>    
</div>

JS:

angular.module("myApp",[])
.controller("myCtrl",function($scope){
    $scope.County = [{ CountyName: 'C1', countyNumber: '01' }, { CountyName: 'C2', countyNumber: '02' }, { CountyName: 'C3', countyNumber: '03' }, { CountyName: 'C4', countyNumber: '04' }];
    $scope.Municipality = [{ MunicipalityName: 'M1', MunicipalityNumber: '01' }, { MunicipalityName: 'M2', MunicipalityNumber: '02' }, { MunicipalityName: 'M3', MunicipalityNumber: '03' }];
    
    $scope.Districts = [{ DistrictsName: 'D1', DistrictsNumber: '01' }, { DistrictsName: 'D2', DistrictsNumber: '02' }, { DistrictsName: 'D3', DistrictsNumber: '03' }];
    
        $scope.featuretype = [
            { type: 'County', data:$scope.County, displayName:'CountyName' },
             { type: 'Municipality', data:$scope.Municipality, displayName:'MunicipalityName'},
             { type: 'District', data:$scope.Districts, displayName:'DistrictsName'}
    ];
});