javascript - How to close div when div loses focus? -

i made simple plunkr here http://plnkr.co/edit/znb65eryh5hxgaqposm0?p=preview

i created little datepicker close when focus out of (focusout of datepicker) if put blur on input i'm unable use datepicker, if put focusout event on datepicker doesn't works

i tried:

angular.element(thecalendar).bind('blur', function () {     $scope.hidecalendar(); }); 

but doesn't work.

any clue?

this because removing item before chance anything, here working example:

http://plnkr.co/edit/mdfv9nlaqcp4l7whdlfi?p=preview

just add timeout:

thisinput.bind('blur', function () {   $timeout(function(){     $scope.hidecalendar();   }, 200); }); 

have considered using existing datepickers? angularui or angular-strap: http://mgcrea.github.io/angular-strap/##datepickers

update:

not complete solution, should quite closer:

    angular.element($document[0].body).bind('click', function(e){       console.log(angular.element(e.target), e.target.nodename)       var classnamed =  angular.element(e.target).attr('class');       var inthing = (classnamed.indexof('datepicker-calendar') > -1);       if (inthing || e.target.nodename === "input") {         console.log('in');       } else {         console.log('out');           $timeout(function(){             $scope.hidecalendar();           }, 200);       }     }); 

http://plnkr.co/edit/ebql5xscng837raehbzh?p=preview

what want listen click on page, , if click outside of calendar, close it, otherwise nothing. above takes account clicking on has class name includes datepicker-calendar, need adjust clicking within calendar doesn't close well.