hide popover when clicked outside of it

Question

here is my code for popover html:

<a data-placement="bottom"  style="float:right;margin-right:20px;" id="new-quote-popover" popover><img src="img/user.png"/>&nbsp;<b>{{UserName}}</b>
   <div id="popover-head" class="hide">USER DETAILS</div>
   <div id="popover-content" class="hide">

       <div class="row smallMargin">
           <div class="col-sm-4">
              varun
           </div>
           <div class="col-sm-8">
               <select name="selectopt"  style="width:80%">
                      <option value="001">001</option>
                      <option value="002">002</option>
               </select>
           </div>
      </div>


   </div>
   </a>

and the directive for popover is

js:

app.directive('popover', function($compile){
    return {
        restrict : 'A',
        link : function(scope, elem){

            var content = $("#popover-content").html();
            var compileContent =function() {
             return $compile(content)(scope);
               };


            var title = $("#popover-head").html();
            var options = {
                content: compileContent,
                html: true,
                title: title
            };

            $(elem).popover(options);
        }
    }
});

It is working well..I am trying to hide the pop-over whenever cliked outside of it.But as it is in tag i am unable to do so.please help me in this.I tried with classname,id but not succeeded .

I checked this question it is not working for me

Answer 1

You need to inject $document service and to create new event listener mousedown on document root.

$document.on('mousedown', addClickOutsideListener);

function addClickOutsideListener(event) {
    var target = event.target;
    while(target != document.body) {
        if(target == elem[0]) {
            //user clicked on Popover, nothing to do
            return;
        }

        if(!target.parentNode)
            return;
        target = target.parentNode;
    }

    hidePopover();
});

Don't forget add listener of scope destroying:

scope.$on('$destroy', function() {
    $document.off('mousedown', addClickOutsideListener);
});