Update default select option when filtering select list

Issue

I have been trying to filter a list of options that are displayed in a drop down list based on a 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="">&lt;Select&gt;</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
    }];
}

here is the jsFiddle

I have a default '' option that should be displayed each time the user changes the type. Now it does filter my options based on the type. however, it does not change my model when the filter changes to .

please help.

Thanks.

Solution

I think this is what you need: Fiddle

Basically, when the user changes the type by switching between the radio buttons, the watch will be triggered that will reset the selected option.

Thus, when changing the types, it ensures that the model associated with the selected option is reset.

$scope.$watch('selectedType', function (newValue, oldValue) {
    if (newValue !== oldValue) {
        $scope.selectedOption = null;
    }
});

Answered By - callmekatootie