Trying to customize a drop down list of options based on radio button selection.
<div>
<div ng-controller="sampleCtrl">
<label>
<input type="radio" name="type" ng-value="1" ng-model="selectedType" />A</label>
<label>
<input type="radio" name="type" ng-value="2" ng-model="selectedType" />B</label>
<select ng-model="selectedOption" ng-options="option.id as option.name for option in options | filter:{type:selectedType}">
<option value=""><Select></option>
</select>
<hr/>
<div>Type: {{selectedType}}</div>
<div>Option: {{selectedOption}}</div>
</div>
</div>
function sampleCtrl($scope) {
$scope.selectedType = 1;
$scope.selectedOption = 0;
$scope.options = [{
id: 1,
name: 'bread',
type: 1
}, {
id: 2,
name: 'sugar',
type: 2
}, {
id: 3,
name: 'tea',
type: 1
}, {
id: 4,
name: 'coffee',
type: 2
}, {
id: 5,
name: 'butter',
type: 2
}];
}
Link to the jsFiddle
A default '' option is set to display when the user changes the type. Filtering works, but model not updating when filter changes. Please assist. Thank you.