title: Send event to angular directive function in scope
body: <p>I'm trying to create a directive with angular for displaying a multiselect that loads its options into a template with an ajax call.
  Here is my directive for now:</p>
  
  <pre><code>function AngularMultiselect () {
      return {
          restrict: 'E',
          replace: true,
          templateUrl: 'temp.html',
          scope: {
              tipo: "@"
          },
          link: function(scope, element, attrs){
              scope.open_tab = function(){
                  element.addClass('open');
                  $(document).on("click",function(){ //beign called at the same time
                      console.log("document clicked");
                  });
              };
              console.log('multiselect being called');
  
          }
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;filtro tipo="client"&gt;&lt;/filtro&gt;
  </code></pre>
  
  <p>Inside the template:</p>
  
  <pre><code>&lt;button type="button"
          class="multiselect btn"
          ng-click="open_tab()"&gt;
  </code></pre>
  
  <p>The problem I have is that the tab opens and closes at the same click. I would use the event to stop the propagation of the event but I'm not able to send it... I've tryed <code>open_tab($event)</code> but then <code>$event</code> contains <code>'client'</code>. Any ideas?</p>
  
  <p>Here you can see it working: <a href="http://codepen.io/vandervals/pen/VeZrdV" rel="nofollow">http://codepen.io/vandervals/pen/VeZrdV</a></p>