title: prevent parent directive call in child element click event
body: <p>Here i have created pop-over directive , i need to apply this to parent as well  as child of it . when i click on child so parent direwctive is also displayed .how can i prevent event propgation to parent. how to use jquery <code>event.StopPropogation ()</code>  ?</p>
  
  <p><a href="http://jsfiddle.net/JNqqU/279/" rel="nofollow">http://jsfiddle.net/JNqqU/279/</a></p>
  
  <p><strong>Directive Code:</strong></p>
  
  <pre><code>var bootstrap = angular.module("bootstrap", []);
  bootstrap.directive('myBox', function ($compile) {
         return {
              restrict: "E",
              transclude: true,
              template: "&lt;span class='box'  pop-over items='items' title='MAin span'&gt;Hello&lt;br/&gt; &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;In side Box &lt;a href='#' pop-over items='items' title='Mode of transport'&gt;Show Pop over&lt;/a&gt; &lt;/span&gt;",
              link: function (scope, element, attrs) {
                  var popOverContent;
                  if (scope.items) {
                      var html = getTemplate("items");
                      popOverContent = $compile(html)(scope);                    
                  }
                  var options = {
                      content: popOverContent,
                      placement: "bottom",
                      html: true,
                      title: scope.title
                  };
                  $(element).popover(options);
              },
              scope: {
                  items: '=',
                  title: '@'
              }
          };
      });
  bootstrap.directive('popOver', function ($compile) {
          var itemsTemplate = "&lt;ul class='unstyled'&gt;&lt;li ng-repeat='item in [1,2,3,4,5,6,7,8]'&gt;{{item}}&lt;/li&gt;&lt;/ul&gt;";
          var getTemplate = function (contentType) {
              var template = '';
              switch (contentType) {
                  case 'items':
                      template = itemsTemplate;
                      break;
              }
              return template;
          }
          return {
              restrict: "A",
              transclude: true,
              template: "&lt;span ng-transclude&gt;&lt;/span&gt;",
              link: function (scope, element, attrs) {
                  var popOverContent;
                  if (scope.items) {
                      var html = getTemplate("items");
                      popOverContent = $compile(html)(scope);                    
                  }
                  var options = {
                      content: popOverContent,
                      placement: "bottom",
                      html: true,
                      title: scope.title
                  };
                  $(element).popover(options);
              },
              scope: {
                  items: '=',
                  title: '@'
              }
          };
      });
  bootstrap.directive( 'dismissPopovers', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse) {
              return {
                  restrict: 'A',
                  link: function(scope, element, attrs) {
                      element.bind('mouseup', function(e) {
                          var clickedOutside = true;
                          $('.popover-link').each(function() {
                              if ($(this).is(e.target) || $(this).has(e.target).length) {
                                  clickedOutside = false;
                                  return false;
                              }
                          });
                          if ($('.popover').has(e.target).length) {
                              clickedOutside = false;
                          }
                          if (clickedOutside) {
                              $('.popover').prev().click();
                          }
                      });   
                  }
              };
          }]);
  </code></pre>