Toggable content Directive

HTML

<body  data-ng-app="plunker">
    <menu>
      <submenu  data-caption="Links">
          <div class='arrow-down'></div>
          <pre><div>
              <textArea class="modalBodyContent" ng-bind="Comments" spellcheck="false" placeholder="Please enter your comments here.."></textArea>
          </div></pre>
      </submenu>
      <submenu data-caption="Share">
          <div class='arrow-down'></div>
          <div ng-include src="'style.css'"></div>
      </submenu>
         <submenu  data-caption="Contact">
          <div class='arrow-down'></div>
          <pre><div ng-include src="'style.css'"></div></pre>
      </submenu>
      <submenu data-caption="About">
          <div class='arrow-down'></div>
          <div ng-include src="'style.css'"></div>
      </submenu>

    </menu>
  </body>

CSS

.submenu {
    text-transform:uppercase;
    background:#EEE;
    padding: 5px 0;
    float:right;
    cursor:pointer;
    position:relative;
    width:100px;
    text-align:center;
    margin-right:5px;
   
}

.submenu-content {
    display:none;
    background:#333;
    color:#FFF;
    position:absolute;
    padding:20px 0;
    text-transform:lowercase;
    width:400px;
    top:45px;
    right:0px;
     border: solid red 1px;
}

.submenu.active .submenu-content {
	display:inline;
}
.arrow-down {
  position: absolute;
  top: -15px;
  right: 35px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #000;
}

JavaScript

var plunker = angular.module("plunker", []);

plunker.directive("menu", function(){
	return {
		restrict : "E",
		scope : {},
		transclude : true,
		replace : true,
		template : "<div class='menu' data-ng-transclude></div>",
		controller : function ($scope, $element/*, $attrs, $transclude*/){
			$scope.submenus = [];

			this.addSubmenu = function (submenu) {
				$scope.submenus.push(submenu);
			}

			this.closeAllOtherToggableContent = function (theOpenOne){
				angular.forEach($scope.submenus, function(submenu){
					if(submenu != theOpenOne){
						submenu.close();	
					}
				})
			}
		}
	}
});


plunker.directive("submenu", function(){
	return {
		restrict : "E",
		require : "^menu",
		scope : {
			caption : "@"
		},
		transclude : true,
		replace : true,
		template : "<div class='submenu'><label>{{caption}}</label><div class='submenu-content' data-ng-transclude></div></div>",
		link : function ($scope, $iElement, $iAttrs, menuController) {
			menuController.addSubmenu($scope);

			/*$iElement.bind("click", function(event){
				menuController.closeAllOtherToggableContent($scope);
				event.preventDefault();
				event.stopPropagation();
				$iElement.toggleClass("active");
			});*/

			$scope.close = function (){
				$iElement.removeClass("active");
			};

			$document.bind("click", function(){
				//menuController.closeAllOtherToggableContent();
			})
		}
	}
});