Call a function when i click outside to the element like boot strap modal get closed

Question

I have created a popup box of div. Which get shown when i click on an icon and get hide when i click on close button. But i want to get it closed if click out side of the popup. What i can do for that. I am using angular in my project and ng-show and ng-hide to show and hide the div. Any help is appreciable. Thanks in advance. html code

<p ng-click="openPopUP()">openPopUp</p>

<div ng-show="popup">
<p>helo</p>
<p ng-click="closePopUp()">Close</p>
</div>

Java script

$scope.openPopUP = function(){
$scope.popup = true;
}
$scope.closePopUp= function(){
$scope.popup = false;
}

I just want to close if some one click out side the div

Answer 1

In your controller:

 angular.element(document.body).on('click', function() {
     $scope.$apply(function() {
         $scope.closePopUp();
     });
 });

Answer 2

First of all read this post to get an idea how to close popups.

Fix for @pixelbits solution is to add $event.stopPropagation(); on popup div.

HTML

<p ng-click="openPopUP()">openPopUp</p>

<div ng-show="popup" ng-click="$event.stopPropagation();">
<p>helo</p>
<p ng-click="closePopUp()">Close</p>
</div>

JS

angular.element(document.body).on('click', function() {
     $scope.$apply(function() {
         $scope.closePopUp();
     });
 });

$scope.openPopUP = function(){
 $scope.popup = true;
}
$scope.closePopUp= function(){
 $scope.popup = false;
}