title: Stop propagation of underlying ng-click inside a jQuery click event
body: <p>A Twitter Bootstrap <code>dropdown</code> is nested inside a <code>tr</code>. The <code>tr</code> is clickable through <code>ng-click</code>. Clicking anywhere on the page will collapse the dropdown menu. That behavior is defined in a directive through <code>$document.bind('click', closeMenu)</code>.</p>
  
  <p><strong>So, when menu is opened, and the user click on a row, I want the menu to close (as it does) AND I want to prevent the click event on the row.</strong></p>
  
  <p>JSFiddle : <a href="http://jsfiddle.net/LMc2f/1/" rel="noreferrer">http://jsfiddle.net/LMc2f/1/</a><br>
  JSFiddle <strong>+ directive inline</strong> : <a href="http://jsfiddle.net/9DM8U/1/" rel="noreferrer">http://jsfiddle.net/9DM8U/1/</a></p>
  
  <p>Relevant code from ui-bootstrap-tpls-0.10.0.js :</p>
  
  <pre><code>angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle', ['$document', '$location', function ($document, $location) {
    var openElement = null,
        closeMenu   = angular.noop;
    return {
      restrict: 'CA',
      link: function(scope, element, attrs) {
        scope.$watch('$location.path', function() { closeMenu(); });
        element.parent().bind('click', function() { closeMenu(); });
        element.bind('click', function (event) {
  
          var elementWasOpen = (element === openElement);
  
          event.preventDefault();
          event.stopPropagation();
  
          if (!!openElement) {
            closeMenu();
          }
  
          if (!elementWasOpen &amp;&amp; !element.hasClass('disabled') &amp;&amp; !element.prop('disabled')) {
            element.parent().addClass('open');
            openElement = element;
            closeMenu = function (event) {
              if (event) {
                event.preventDefault();
                event.stopPropagation();
              }
              $document.unbind('click', closeMenu);
              element.parent().removeClass('open');
              closeMenu = angular.noop;
              openElement = null;
            };
            $document.bind('click', closeMenu);
          }
        });
      }
    };
  }]);
  </code></pre>
  
  <p>I can't figure out how to stop the underlying <code>ng-click</code> event inside <code>closeMenu</code>.</p>
  
  <p>NOTE : I can't find a way to access <code>$event</code> so I haven't been able to try <code>$event.stopPropagation()</code>.</p>