Hint Directive Toggle Problem

Try: Click green box, click it again - works Click green box, click background - works Click green box, click other green box - doesn't work (both are open)

by Aides

HTML

<div ng-app="app">
  <div class="split">
    <br><br><br><br><br>
    <p hint-directive>
      Text1
    </p>
  </div>
  <div class="split">
    <br><br><br><br><br>
    <p hint-directive>
      Text2
    </p>
  </div>
</div>

CSS

html, body
{
  width: 100%;
  height: 100%;
}
 
.split
{
  float: left;
  width: 50%;
  height: 100%;
}

.toggle
{
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: green;
}

p
{
  float: left;
}

.message
{
  background-color: grey;
  width: 200px;
}

JavaScript

angular.module('app', [])
  .controller('testCtrl', ['$scope', function($scope) {
    var self = this;
  }])
  .directive('hintDirective', ['$compile', function($compile) {
    return {
      restrict: 'A',
      scope: {},
      compile: function(element) {
        element.after('<span class="toggle"></span><div class="message" ng-show="active">Hint Message</div>');
        return this.link;
      },
      link: function(scope, element) {
      	angular.element(element.parent().find('span')).bind('click', function(event) {
        	console.log('toggling');
          scope.$apply(function() {
            scope.active = !scope.active;
            console.log(scope.active)
          });
          event.stopPropagation();
        });
        angular.element(document).bind('click', function() {
          console.log('closing');
          scope.$apply(function() {
          	scope.active = false;
          });
        });
        
        $compile(element.parent().find('span'))(scope);
        $compile(element.parent().find('div'))(scope);
      }
    }
  }]);