javascript - AngularJS - Click event (in directive) triggers when anywhere in the parent is clicked -

i'm going best explain issue - bear me.

this whole thing directive file selection:

the directive has ng-transclude component contains few directives, contained in own divs.

parent directive:

<div class="extra-cells">     <div ng-transclude class="extra-cells-row"></div> </div> 

ng-transclude content:

<div file-upload-directive>      <div bo-if="config.drive">          <div google-picker>              <div>google drive</div>          </div>      </div>       <div bo-if="config.dropbox">          <div dropbox-chooser>              <div>dropbox</div>          </div>      </div>       <div bo-if="config.link">          <div ng-click="selectlink()">              <div>paste link</div>          </div>      </div> </div> 

ng-transclude content(visual):

the click event in offending (dropbox) directive fires when click anywhere in highlighted section.

dropboxchoosermodule.directive('dropboxchooser', function(dropboxchooserservice) {    return {      priority: 1,      restrict: 'ea',      transclude: true,      scope: {        widget: '=',        options: '=',        extensions: '=',      },      template: '<div class="">' +        '<div ng-transclude></div>' +        '<input type="dropbox-chooser" name="selected-file"/></div>',      link: function postlink(scope, element, attrs) {        element.bind("click", function(event) {          dropboxchooserservice.choose({            success: function(files) {},            cancel: function() {}          })        });      },      replace: true    };  });

the question is, naturally, causing trigger , how make stop. should trigger when element dropbox directive clicked.

removing input element inside directive seems have "fixed" problem.