title: How to detect element click efficiently in Angular?
body: <p>Here is my link function for my directive</p>
  
  <pre><code>    function linkFunc(scope, element, attr){
  
          // Detect Element Click Logic
          scope.myCtrl.clickedElsewhere = {value: true};
  
          $document.on('click', function(){
              scope.myCtrl.clickedElsewhere.value = true;
              scope.$apply();
          });
  
          element.on('click', function(){
              event.stopPropagation();
              scope.myCtrl.clickedElsewhere.value = false;
              scope.$apply();
          });
          // End Detect Element Click Logic
  
      }
  </code></pre>
  
  <p>As we can see, we used <code>$document.on()</code> and <code>scope.apply</code> , this means that for every click on anywhere in the document we will trigger a digest cycle. If we have alot of <code>$watch</code> triggers this might cause the web page to slow down. Although this implementation is not every efficient, I can't think of other ways to detect on element click and off element click for expanding and contracting my element. </p>
  
  <p>Can someone provide some insight?</p>
  
  <p>Thanks</p>