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

Issue

I'm going to do my best to explain my issue - bear with me.

This whole thing is a directive for file selection:

The directive has an ng-transclude component that contains a few directives, contained in their 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 a link</div>
         </div>
     </div>
</div>

ng-transclude content(visual):

The click event in the offending (dropbox) directive fires when I click anywhere in the 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, what is causing it to trigger and how do I make it stop. It should trigger only when the element with the dropbox directive is clicked.

Solution

Removing the input element inside the directive seems to have "fixed" the problem.

Answered By - Tantelope