Disable re-select when model was selected in Angularjs-chosen

Question

I need help with the following scenario:

I use a single-select dropdowns in a table. Each row has its own dropdown. Now there are 2 options for changing the selection:

1. Click on deselect ('x') icon (works ok - via ng-change).

2. Open the dropdown, choose another value from list. Override the previous value (although ng-change fires, I have no way to know if it's a new value or a overriding value).

I wish to disable the second behavior. Is it possible to 'tell' chosen that once a value was selected, the only way to re-select a new value is to click on 'x'? e.g: once a value was selected, disable the dropdown, hide the 'arrow' icon, but keep the 'x' deselect icon active?

<select chosen
                            allow-single-deselect="true"
                            placeholder-text-single="'Select'
                            ng-model="row.userSelection"
                            ng-options="field as field.name for field in vm.fields">
                        <option value=""></option>
                    </select>

Thanks.

Answer 1

Add an ng-disabled="$ctrl.model" will disable the select until the "x" clears the $ctrl.model. Once cleared the select will be Reenabled and a new selection can be made.

The only thing I can think of after taking a quick look, is to convert from ng-options to and use ng-disabled on the actual option element. The documentation says that you can hide disabled options, so if for example you were to select OPTION1 and OPTION[2-4] were disabled, they would be removed from the list.

I found a plunker with version 1.0 but it doesn't work. Making options distabled still shows them in the list, although it makes them undefined when you select them. Maybe a newer version is updated to actually remove them.