title: Angular Click outside of an element in directive
body: <p>css</p>
  
  <pre><code>ul {
     display: none
  }
  span.active+ul {
     display:block
  }
  </code></pre>
  
  <p>html </p>
  
  <pre><code>&lt;div ng-controller='exchangeFormCtr'&gt;
      &lt;div toggle-class="active"&gt;
         &lt;ul&gt;
             &lt;li ng-repeat='carrency in carrencies'&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div toggle-class="active"&gt;
         &lt;ul&gt;
             &lt;li ng-repeat='carrency in carrencies'&gt;
         &lt;/ul&gt;
      &lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>controller</p>
  
  <pre><code>exchange.controller('exchangeFormCtr',['$scope', function($scope) {
      $scope.carrencies = [
          {name:'mastercard'},
          {name:'visa'},
          {name:'paypal'}
      ];
  }]);
  </code></pre>
  
  <p>directive </p>
  
  <pre><code>app.directive('toggleClass', function() {
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
              element.bind('click', function() {
                  console.log(element);
                  element.toggleClass(attrs.toggleClass);
              });
      }
  };
  </code></pre>
  
  <p>When I clicked on span directive change class to active or remove it. </p>
  
  <p>How can I catch outside click event and remove active class by angular way?</p>