angularjs - クリック時に DOM およびその親から AngularJS コンポーネントを削除する

Question

AngularJSでユーザーのリストを表示しようとしています

それぞれがカスタムコンポーネント要素を持つユーザーになります コンポーネントには2つのボタンがあります

• 最初に、コンポーネント要素を DOM から削除する必要があります (そして、ウォッチャーなどを破棄します)。ただし、ユーザーのリストは変更しないでください。

• 2 つ目は、コンポーネントを削除する必要があり、かつリストからユーザーを削除する必要があります

Plunkrでこのサンプルケースを用意しました

---

// app.controller.js
// ///////////////////

(function() {
  'use strict';
  angular
    .module('app')
    .controller('MainController', MainController);

  function MainController( $log, $scope ) {
    var vm = this;
    vm.title = "I'm the Parent controller";

    vm.users = [
      {id: 1, name: 'Rob', color: 'slategrey'},
      {id: 2, name: 'Ned', color: 'snow'},
      {id: 3, name: 'Ramsey', color: 'palevioletred'}
    ];
  }
})();



// Component Controller
// /////////////////////////

(function() {
  'use strict';
  angular
    .module('app')
    .controller('ComponentController', ComponentController);

  function ComponentController() {
    var $ctrl = this;

    $ctrl.removeMe = removeMe;
    $ctrl.removeMeFromAll = removeMeFromAll;

    function removeMe(){
      //angular.element.remove();
      //$ctrl.$destroy();

      // Magic goes here 
      // .............
    }

    function removeMeFromAll(userID) {
      // Magic goes here 
      // .............
    } 
  }
})();

リンク要素を使用したディレクティブの使用方法を検索して見てきましたが、ここで適用する方法がわかりません。