title: Is it possible to pass a boolean to a directive and trigger something if that boolean changes without $watch?
body: <p>I was hoping to be able to do something similar to the following simplified example:</p>
  
  <pre><code>class ButtonController {
    set isFoo(value) {
      console.log(value);
      // do something here
    }
  }
  
  angular.module('myApp', []).directive('mButton', () =&gt; {
    return {
      restrict: 'E',
      replace: true,
      controller: ButtonController,
      controllerAs: 'button',
      template: '&lt;button class="btn" type="button"&gt;Blah&lt;/button&gt;',
      scope: {},
      bindToController: {
        isFoo: '='
      }
    };
  });
  </code></pre>
  
  <p>and call the directive like:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
    &lt;m-button is-foo="true"&gt;&lt;/m-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>preview: <a href="http://codepen.io/anon/pen/zrWRVr?editors=1010" rel="nofollow">http://codepen.io/anon/pen/zrWRVr?editors=1010</a></p>
  
  <p>However, this generates a <code>$compile:nonassign</code> error so to fix, I could do this:</p>
  
  <pre><code>&lt;div ng-app="myApp" ng-init="foo=true"&gt;
    &lt;m-button is-foo="foo"&gt;&lt;/m-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>preview: <a href="http://codepen.io/anon/pen/VexweM?editors=1010" rel="nofollow">http://codepen.io/anon/pen/VexweM?editors=1010</a></p>
  
  <p>But I want to be able to pass the boolean directly as shown in the previous markup. Is this not possible? Do I really need to do something like the following if I want to pass the boolean directly? </p>
  
  <pre><code>class ButtonController {
    set isFooWatcher(value) {
      console.log(value);
      // do something here
    }
  }
  
  angular.module('myApp', []).directive('mButton', () =&gt; {
    return {
      restrict: 'E',
      replace: true,
      controller: ButtonController,
      controllerAs: 'button',
      template: '&lt;button class="btn" type="button"&gt;Blah&lt;/button&gt;',
      scope: {},
      bindToController: {
        isFoo: '='
      },
      link(scope, element, attrs, ctrl) {
        scope.$watch(() =&gt; ctrl.isFoo, () =&gt; {
          ctrl.isFooWatcher = ctrl.isFoo;
        });
      }
    };
  });
  </code></pre>
  
  <p>preview: <a href="http://codepen.io/anon/pen/QymxrZ?editors=1010" rel="nofollow">http://codepen.io/anon/pen/QymxrZ?editors=1010</a></p>