how to close pop up screen when click out side in screen - angularjs

Question

I make one pop up screen I open pop up screen on button screen .I want to hide pop up screen when I click outside the screen can is this possible ?
code
http://codepen.io/anon/pen/KpLgpm
angular.module('ionic.example', ['ionic'])
.controller('PopupCtrl', function($scope, $timeout, $q, $ionicPopup) {
$scope.showPopup = function() {
$scope.data = {}
$scope.setDefault = function () {
console.log('Default set', arguments);
$scope.$onClose({ test: 'hello' });
};
$scope.btns = [
{
label: "Hi",
value: "hi"
},
{
label: "Hello",
value: "hello"
}
];
$ionicPopup.show({
template: '',
title: 'Pick a default value',
scope: $scope,
buttons: [
{
text: 'Awesome',
onTap: function(e) { return 'awesome'; }
},
{ text: 'Cool', onTap: function(e) { return 'cool'; } },
{ text: 'Cooler', onTap: function(e) { return 'cooler'; } },
{ text: 'Stuff', onTap: function(e) { return 'stuff'; } }
]
}).then(function(res) {
console.log('Tapped!', res);
}, function(err) {
console.log('Err:', err);
}, function(msg) {
console.log('message:', msg);
});
};
});

Answer 1

angular.element( $window ).on( "click", function( event ) {
if( angular.element( "#popdiv" ).has( event.srcElement || event.target ).length === 0 ) {
// hide popup
}} );

Answer 2

I've found a solution, called "ionic-close-popup".
Install this in your project, add in your index.html, inject in the controller, and register the popup:
https://libraries.io/bower/ionic-close-popup

Answer 3

You can create a directive with below code
angular.module("testapp").directive('clickAnywhereButHere', ["$document", function ($document) {
//click-any-where-but-here
return {
restrict: 'A',
link: function (scope, elem, attr, ctrl) {
var elemClickHandler = function (e) {
e.stopPropagation();
};
var docClickHandler = function () {
scope.$apply(attr.clickAnywhereButHere);
};
elem.on('click', elemClickHandler);
$document.on('click', docClickHandler);
// teardown the event handlers when the scope is destroyed.
scope.$on('$destroy', function () {
elem.off('click', elemClickHandler);
$document.off('click', docClickHandler);
});
}
};
Then in your html element
<div class="mypopup" click-anywhere-but-here="function(){ alert('click out popup event')}"></div>