Q:

How to properly delete the directive scope from controller in AngularJS 1.2

I'm trying to remove an instance of a directive from the page with a controller call and getting some kind of digest issue that I can't seem to be able to figure out. Looks like the scope isn't getting cleaned up properly and evens are still fired after the element is removed. Help is appreciated.
Here's my trimmed down HTML:
<div ng-controller="MyCtrl">
  <div class="directive-text" ng-style="style('green')" my-directive>This is my directive</div>
  <a ng-click="delete()">[ delete ]</a>
</div>

And my JS:
var demo = angular.module('demo', []);

demo.directive('myDirective', function() {
  return {
    link: function($scope, $element) {
      console.log('init directive');
    }
  }
});

demo.controller("MyCtrl", ['$scope', '$compile', function($scope, $compile) {
 $scope.items = {
    'red': {
      style: {
        color: 'red'
      }
    },
    'green': {
      style: {
        color: 'green'
      }
    }
  };

  $scope.style = function(color) {
    return $scope.items[color].style;
  }

  $scope.delete = function() {
    console.log('deleting...');
    $('.directive-text').remove();
    delete $scope.items['green'];
  };
}]);

Here's a plunker: http://plnkr.co/edit/Rfp93aTucdivy0zguJaF

A:

Searching on SO for "angular remove directive from DOM" got me this:
Angularjs remove custom directive and child directives from DOM
The short version: You should destroy the scope of the directive before you remove it from the DOM.
$scope.delete = function() {
  console.log('deleting...');
  // Destroy the directive's scope
  angular.element(document.querySelector(".directive-text")).scope().$destroy();
  // I changed the following line to avoid using jQuery
  angular.element(document.querySelector(".directive-text")).remove();
  delete $scope.items['green'];
};

