ng-options with disabled rows

@lucuma's answer (originally the accepted answer) was correct, but by now should be updated, because this was fixed in Angular 1.4. See the docs of ng-options which also contains an example.

I'm using Angular 1.5 and this works for me:

View

<select ng-model="$ctrl.selectedItem" ng-options="item as item.label disable when item.disabled for item in $ctrl.listItems">

Controller

vm.items = [ { id: 'optionA', label: 'Option A' }, { id: 'optionB', label: 'Option B (recommended)' }, { id: 'optionC', label: 'Option C (Later)', disabled: true }];vm.selectedItem = vm.items[1];

As pointed by @Lod Angular added support for this in 1.4.0-beta.5.

For angular js >= 1.4.0-beta.5.

<select ng-options="c.name disable when c.shade == 'dark' group by c.shade for c in colors">

And for angular js < 1.4.0-beta.5 refer the solution below:

Similar to the one given by @lucuma but without jQuery dependency.

Check this http://jsfiddle.net/dZDLg/46/

Controller

<div ng-controller="OptionsController">    <select ng-model="selectedport"         ng-options="p.name as p.name for p in ports"        options-disabled="p.isinuse for p in ports"></select>    <input ng-model="selectedport"></div>

Directive

angular.module('myApp', []).directive('optionsDisabled', function($parse) {    var disableOptions = function(scope, attr, element, data,                                   fnDisableIfTrue) {        // refresh the disabled options in the select element.        var options = element.find("option");        for(var pos= 0,index=0;pos<options.length;pos++){            var elem = angular.element(options[pos]);            if(elem.val()!=""){                var locals = {};                locals[attr] = data[index];                elem.attr("disabled", fnDisableIfTrue(scope, locals));                index++;            }        }    };    return {        priority: 0,        require: 'ngModel',        link: function(scope, iElement, iAttrs, ctrl) {            // parse expression and build array of disabled options            var expElements = iAttrs.optionsDisabled.match(                /^\s*(.+)\s+for\s+(.+)\s+in\s+(.+)?\s*/);            var attrToWatch = expElements[3];            var fnDisableIfTrue = $parse(expElements[1]);            scope.$watch(attrToWatch, function(newValue, oldValue) {                if(newValue)                    disableOptions(scope, expElements[2], iElement,                         newValue, fnDisableIfTrue);            }, true);            // handle model updates properly            scope.$watch(iAttrs.ngModel, function(newValue, oldValue) {                var disOptions = $parse(attrToWatch)(scope);                if(newValue)                    disableOptions(scope, expElements[2], iElement,                         disOptions, fnDisableIfTrue);            });        }    };});

Note: This solution doesn't work with group by as rightly pointed by everyone. Refer the solution below by @DHlavaty if you are looking to make it work with group by.

Angular added support for this in 1.4.0-beta.5

<select ng-options="c.name disable when c.shade == 'dark' group by c.shade for c in colors">