title: AngularJS directive toggle menu preventing default for other directive
body: <p>So I made a directive for a toggle (drop down) menu in AngularJS. I used the directive for multiple items within the page but I have a small problem. When one item is open and I click another one I want the previous one to close. The event.preventDefault and event.stopPropagation stops the event for the previous item and doesn't close it. Any ideas on how to fix this? Is there a way to perhaps only stop the event within the scope?</p>
  
  <pre><code>app.directive('toggleMenu', function ($document) {
      return {
          restrict: 'CA',
          link: function (scope, element, attrs) {
              var opened = false;
              var button = (attrs.menuButton ? angular.element(document.getElementById(attrs.menuButton)) : element.parent());
              var closeButton = (attrs.closeButton ? angular.element(document.getElementById(attrs.closeButton)) : false);
  
              var toggleMenu = function(){
                  (opened ? element.fadeOut('fast') : element.fadeIn('fast'));
              };
  
              button.bind('click', function(event){
                  event.preventDefault();
                  event.stopPropagation();
                  toggleMenu();
                  opened = ! opened;
              });
  
              element.bind('click', function(event){
                  if(attrs.stayOpen &amp;&amp; event.target != closeButton[0]){
                      event.preventDefault();
                      event.stopPropagation();
                  }
              });
  
              $document.bind('click', function(){
                  if(opened){
                      toggleMenu();
                      opened = false;
                  }
              });
  
  
          }
      };
  </code></pre>
  
  <p>And here's a Fiddle: <a href="http://jsfiddle.net/JknUJ/5/" rel="nofollow">http://jsfiddle.net/JknUJ/5/</a>
  Button opens content and content should close when clicked outside the div. When clicked on button 2 however content 1 doesn't close.</p>