angularjs - Angularコンポーネントでクリックリスナーを登録解除するには?

Question

Angular コンポーネントが破棄されたときにドキュメント クリック リスナーを削除するにはどうすればよいですか?

簡略化されたデモ コード:

<div ng-app="app">
  <div ng-controller="TestingCtrl as vm">

    <my-component ng-if="vm.showComponent"></my-component>

    <br><br><br>

    <button ng-click="vm.setShowState(false)">
      Destroy component
    </button>

  </div>
</div>

Javaスクリプト:

angular.module('app', [])

.controller('TestingCtrl', function TestingCtrl() {
    this.showComponent = true;

  this.setShowState = function(state) {
    this.showComponent = state;
  }
})

.component('myComponent', {  
  bindings: {
    name: '@'
  },
  template: 'myComponent',  
  controller: function ($document) {
    var listener;

    this.$onInit = function() {
        listener = $document.on('click', function () {
            console.log('You clicked on the document');
        });
    }

    this.$onDestroy = function() {
        console.log('$onDestory triggered');
        $document.off('click', listener);
    }

  }
});

フィドル

「Destroy component」ボタンをクリックすると、コンポーネントが DOM から削除され (ng-if を使用)、$onDestroy がトリガーされます。$onDestroy でクリック イベントの登録を解除したいのですが、何も起こりません。