title: Binding an event to $(document) inside an angular directive
body: <p>I have a directive which implements kind of a select box.<br/>
  Now when the select box is open and I click somewhere outside of it(anywhere else in the document) I need it to collapse.</p>
  
  <p>This JQuery code works inside my directive, but I want to do it "the angular way":</p>
  
  <pre><code>  $(document).bind('click', function (e) {
         var $clicked = e.target;
         if (!$clicked.parents().hasClass("myClass")) {
              scope.colapse();
         }
    });
  </code></pre>
  
  <p>I tried doing thing with injecting the $document service into my directive but didn't succeed.</p>