Minimal directive example

from https://groups.google.com/forum/?fromgroups#!topic/angular/Ovn-5jVK3So

HTML

<div ng-controller="MyCtrl">
    <select id="field1" ng-model="data.field1" ng-options="i.value as i.text for i in values | filter: { valid: true }" auto-disable></select>
</div>

JavaScript

var app = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.values = [{
        value: 'hello',
        text: 'world',
        valid: true
    }, {
        value: 'hello2',
        text: 'world2',
        valid: false
    }, {
        value: 'hello3',
        text: 'world3',
        valid: false
    }, {
        value: 'hello4',
        text: 'world4',
        valid: false
    }, ];
}

app.directive('autoDisable', function () {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, elm, attrs) {
            var ngOptions = attrs.ngOptions;
            var cutOff = ngOptions.indexOf(" in ");
            ngOptions = ngOptions.substring(cutOff + 4);

            scope.$watch(ngOptions,

            function (newValue) {
                if (newValue && newValue.length <= 1) {
                    elem.attr('disabled', 'disabled');
                } else {
                    elem.removeAttr('disabled');
                }
            }, true);
        }
    };
});