setting ng-disabled in a directive from outer controller $scope

Question

The linked fiddle contains a simple directive with a <select>. I would like to disable the <select> tag by setting a variable in the outer controller. In devtools I see the value of ng-disabled to change from false to true, but the <select> remains enabled. Could someone help me on what am I doing wrong?

http://jsfiddle.net/bika/PRsH7/12/

Answer 1

Try:

.directive( 'myTag', function() {
    return {
        restrict: 'E',
        scope: {
            isDisabled: '=' //use 2-way binding instead.
        },
        template: '<select ng-disabled="isDisabled"><option>not disabled</option></select>'
    };
});

HTML:

<my-tag is-disabled="isDisabled"></my-tag>

DEMO

Answer 2

This happens because when using "@", isDisabled is evaluated at a string, not a boolean. isDisabled is an expression, and hence you should use "&" to pass it to your directive.

    .directive( 'myTag', function() {
      return {
        restrict: 'E',
        scope: {
          isDisabled: '&'
        },
        template: '<select ng-disabled="isDisabled()"><option>not disabled</option></select>',
      };
    });

Fiddle: http://jsfiddle.net/bulbul/PRsH7/16/

More reference: http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/ What is the difference between '@' and '=' in directive scope in AngularJS?

You might also want to watch John Lindquist's awesome videos on directives: https://egghead.io/search?q=directive