Disable select in Angular?

Question

On page is located HTML select list:

<select ng-model="names" disabled="{{disabled}}" name="names" class="form-control input-medium">

And in controller:

$scope.disabled = true;

And ng-change:

$scope.changeSpecialization = function (id){
    console.log(id); // Gives value more that 0
    if(id > 0){
      $scope.disabled = false;
    }
}

How you can see in method changeSpecialization I catch id and check it to zero. Console returns me value more that zero. So after is changed $scope.disabled to false. But on page select list is still disabled.

Answer 1

You should use ngDisabled directive.

This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy.

Code Example

<select ng-disabled="disabled" ng-model="names" name="names">
</select>