如何在Angular指令中侦听元素的属性更改？

这是一个plunker，它很好地展示了我正在尝试做的事情。

我有一个指令！孤立的范围！具有要更改的属性

<div ng-init="environment='natural'">
  <input ng-model=environment>
  <chameleon env="{{ environment }}"></chameleon>
</div>

我希望我的指令响应全局范围的更改：

angular.module('app', []).directive('chameleon', function () { return {

  template: 'I am {{ color }}',
  scope: {} // isolated

  ,link: function (scope, element, attrs) {

    scope.$watch('env', function () {
       scope.color = getColor();
    });

    function getColor () {
       switch (attrs.env) {
          case 'excited': return 'red';
          ...
          case 'natural':
          default: return 'green';
       }
    }

        /* here I need something similar to this not-working code :
         *   element.on('attributeChange', function () {
         *      scope.env = attrs.env
         *   });
         */
  }

}});

我知道我可以使用隔离范围来绑定周围范围的值，例如

scope: {
  env: '='
}

但是我真的需要有一个独立的组件，因为属性的值env不仅会从模型中更改。

随意分叉我的朋克。