ng option combine two dynamic fields

Question

I am displaying two drop downs and the ng-option for second drop down is dynamic but how can I combine two dynamic fields to be displayed in drop down, I know how to do that for a static field. Please take a look at jsfiddle http://jsfiddle.net/LfEMw/5/

View:

<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>    
    <br/><br/>
        I want second drop down to display in this format when any feature is selected<br/>
    <select id="Select2" class="form-control input-sm" ng-model="factory.geography.county" ng-options="c as c.CountyName + '-' + c.countyNumber for c in County" multiple>
        <option value="">Select a Feature...</option>
    </select>    

</div>

Controller:

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'}
    ];
});

Answer 1

Update:

Oh! I get it now, you want something like this:

Example

Custom $filter + controller

angular.module("myApp",[])
.filter('customInterpolate', function($interpolate){
    return function(context, expression){
        return $interpolate(expression)(context);  
    }
})
.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, displayExpression:'{{CountyName}}-{{countyNumber}}' },
            { type: 'Municipality', data:$scope.Municipality, displayExpression:'{{MunicipalityName}} whatever {{MunicipalityNumber}}'},
            { type: 'District', data:$scope.Districts, displayExpression:'{{DistrictsName}} different {{DistrictsNumber}}'}
    ];
});

Template

<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|customInterpolate:option1.displayExpression) for c in option1.data" multiple>
        <option value="">Select a Feature...</option>
    </select>    
</div>

---

---

Old Answer

Like this?

Example

View:

<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]+'-'+c[option1.displayCode] for c in option1.data" multiple>
        <option value="">Select a Feature...</option>
    </select>    
</div>

Controller:

$scope.featuretype = [
    { type: 'County', data:$scope.County, displayName:'CountyName', displayCode:'countyNumber' },
    { type: 'Municipality', data:$scope.Municipality, displayName:'MunicipalityName', displayCode:'MunicipalityNumber'},
    { type: 'District', data:$scope.Districts, displayName:'DistrictsName', displayCode:'DistrictsNumber'}
];