angularjs - Angular: prevent default not working when clicking on div -

in plunk have 2 divs. first div (orange color) contains second div (blue color). objective show alert when click on div.

if click on orange div (directive dir1), you'll see alert. if click on blue div (directive dir2), see two alerts, because prevent default e.preventdefault() not stopping chain of events. how make work?

html:

  <div dir1 style="width:200px;height:200px;background-color:orange">        <div dir2 style="width:100px;height:100px;background-color:blue"> </div>  </div> 

javascript:

app.directive('dir1', function() {      var directive = {};     directive.restrict = 'ea';      directive.link = function(scope, element, attrs) {          element.bind('click', function() {             alert('clicked on dir1');         });     }      return directive;  });    app.directive('dir2', function() {      var directive = {};     directive.restrict = 'ea';      directive.link = function(scope, element, attrs) {          element.bind('click', function(e) {             e.preventdefault();             alert('clicked on dir2');         });     }     return directive;  }); 

use e.stoppropogation() stop event propogating

element.bind('click', function(e) {                e.stoppropagation();               alert('clicked on dir2'); });