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

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

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 2

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>

Answer 3

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