How to close a popover on click outside in angular js
<p>I want to close the popover if the user click outside the popover. in the below code .tried it with few examples that were posted for clicking outside the popover but not working.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html &gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;AngularJS Plunker&lt;/title&gt;
    &lt;link  rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/1.2.22/angular.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body ng-app="myApp"&gt;
    &lt;div class="example" ng-controller="MyCtrl"&gt;
        &lt;a class="btn btn-lg btn-success" href="javascript:;" popover ng-click="click()"&gt;popover&lt;/a&gt;
        &lt;div style="display:none"&gt;
            &lt;div class="pop-content" id="val"&gt;
                {{ myVar }}
                &lt;input type="button" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      
        &lt;input ng-model="myVar"&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;script&gt;
    var myApp = angular.module('myApp', []);
    myApp.controller('MyCtrl', function ($scope) {
        $scope.myVar = 3 + 4;   
    }) 
    myApp.directive('popover', function ($compile) {
        return {
            link: function (scope, element, attrs) {
                // define popover for this element
                $(element).popover({
                    html: true,
                    placement: "top",
                    // grab popover content from the next element
                    content: $compile($(element).siblings(".pop-content").contents())(scope)
                });
            }
        }
    });

&lt;/script&gt;</code></pre>
</div>
</div>
</p>