How to disable a <option> of select element when using AngularJS ng-options?

All we need is an easy explanation of the problem, so here it is.

Is there a way to disable an option in a select element when we populate options with ng-options in AngularJS?

Like this:

You can do it by adding ng-disabled to each <option> tag, but is there a way to do it if we are using the ng-options directive in the select tag?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

One way to do this is, to forget using ng-options on the select element, and add the options in with ng-repeat, then you can add a ng-disabled check on each option.

<div ng-app="myapp">
    <form ng-controller="ctrl">
        <select id="t1" ng-model="curval">
            <option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option>
        <button ng-click="disabled[curval]=true">disable</button>

a minimal controller for testing:

angular.module('myapp',[]).controller("ctrl", function($scope){

Method 2

From Angular 1.4 :
We can use disable when in ng-options, for example:

 $scope.colors = [
  {name:'black', shade:'dark'},
  {name:'white', shade:'light', notAnOption: true},
  {name:'red', shade:'dark'},
  {name:'blue', shade:'dark', notAnOption: true},
  {name:'yellow', shade:'light', notAnOption: false}
$scope.myColor = $scope.colors[2]; // red

This example have colors grouped by shade, with some disabled:

<select ng-model="myColor" ng-options=" group by color.shade disable when color.notAnOption for color in colors"></select>

I got this code from the angular documentation.

Method 3

You should use ng-disabled directive

<body ng-app="myApp">

  <div ng-controller="myCtrl">
    <form class="form-inline">
      <div class="form-group">
        <select class="form-control" ng-disabled="disableSelect">
          <option val="one">First</option>
          <option val="two">Second</option>

      <button class="btn btn-default" ng-click="disableSelect = !disableSelect">
        Disable select


Here you could find the complete example

Method 4

Solve with version 1.4 [double check you look for v1.4 documentation]

Method 5

Probably something like this

<button ng-click='disableSelect=true'></button>

<select ng-disabled='disableSelect'></select>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply