ng-disabled doesn't work in Angular Chosen

Question

I have two select boxes in my project. First one shows formats and the second one has two options, namely, "Yes" and "No". I have used angular chosen on both these boxes.

Initially, the "Yes" option from the second select box is disabled. I want to enable that option when the user selects "PDF" as format from the first select box.

These are my select boxes

//first  
<select name="exporType" id="exporType" ng-model="interactor.parameters.exporType" ng-options="format for format in formatOptions" ng-change="checkDisable();" chosen>
        <option value=""></option>
</select>

//second
<select name="maskAccountNumber" id="maskAccountNumber" ng-model="interactor.parameters.maskAccountNumber" style="width:145px;" chosen>
    <option value=""></option>
    <option value="N">No</option>
    <option value="Y" ng-disabled="disableoption">Yes</option>
</select>

I am calling ng-change on first select box which would set the "Yes" option ( $scope.disableoption ) to true or false based on its selection

The function is as follows

$scope.checkDisable = function() {

        console.log("Export type is "+$scope.interactor.parameters.exporType);
        if($scope.interactor.parameters.exporType == "PDF")
            $scope.disableoption = false;
        else
            $scope.disableoption = true;
};

The problem is that when I select "PDF" as option from first select box the "Yes" option doesn't update.

If I remove chosen from my select boxes it works fine but not with chosen

EXAMPLE WITH CHOSEN

EXAMPLE WITHOUT CHOSEN

Answer 1

I have been advised on this site several times against using actual <option> tags to build a <select> with Angular, because you lose some of the dynamic power which the controller can have. In my solution below, I completely control the state of both selects from the controller. Follow the Fiddle for a working demo.

HTML:

<select name="exporType" id="exporType"
        ng-model="exporType"
        ng-options="format.value as format.name for format in formatOptions"
        ng-change="checkDisable()" style="width:145px;">
</select>

<select name="maskAccountNumber" id="maskAccountNumber"
        ng-model="maskAccountNumber"
        ng-options="mask.value as mask.name disable when mask.disabled for mask in maskOptions"
        ng-change="checkDisable()" style="width:145px;">
</select>

Controller:

function MainController($scope) {
    $scope.disableoption = true;
    $scope.formatOptions = [{value: "BAI", name: "BAI"},
                            {value: "CSV", name: "CSV"},
                            {value: "PDF", name: "PDF"},
                            {value: "QBO", name: "QBO"},
                            {value: "QFX", name: "QFX"},
                            {value: "XLS", name: "XLS"}];

    $scope.maskOptions = [{value: "N", name: "No", disabled: false},
                          {value: "Y", name: "Yes", disabled: true}];

    $scope.exporType = "BAI";
    $scope.maskAccountNumber = "N";

    $scope.checkDisable = function() {
    if ($scope.exporType == "PDF") {
        // show the 'Yes' option for PDF
        $scope.maskOptions[1].disabled = false;
    }
    else {
        // hide the 'Yes' option if not PDF
        $scope.maskOptions[1].disabled = true;

        // change the mask to 'No' when switching to anything
        // other than PDF, since 'Yes' cannot be selected
        $scope.maskAccountNumber = "N";
    }
};

Demo here

JSFiddle