Binding an event to $(document) inside an angular directive

All we need is an easy explanation of the problem, so here it is.

I have a directive which implements kind of a select box.
Now when the select box is open and I click somewhere outside of it(anywhere else in the document) I need it to collapse.

This JQuery code works inside my directive, but I want to do it “the angular way”:

  $(document).bind('click', function (e) {
       var $clicked =;
       if (!$clicked.parents().hasClass("myClass")) {

I tried doing thing with injecting the $document service into my directive but didn’t succeed.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I believe, the most true Angular way is to use angular.element instead of jQuery and accessing window.document via the $document service:

(function() {

    ['$window', '$document', '$log',
    function($window, $document, $log) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          $document.bind('click', function(event) {
            if (angular.element('myClass')) {


Plunker link

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply