var app = angular.module('plunker', ['anyOtherClick']);

app.controller('MainCtrl', function($scope) {

  var ctrl = {
    popupVisible: false,
  };

  ctrl.showPopup = function() {
    ctrl.popupVisible = true;
  };
  ctrl.hidePopup = function() {
    ctrl.popupVisible = false;
  };

  return ctrl;
});
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.27/angular.js" data-semver="1.2.27"></script>
  <script src="any-other-click.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as ctrl">
  <div>
    <a ng-click="ctrl.showPopup(); $event.stopPropagation()">Click To Show Popup</a>
    <div class="popup" ng-show="ctrl.popupVisible" any-other-click="ctrl.hidePopup()">
      <strong>Popup Visible!</strong>
      <br />
      <br />
      <div>Clicks inside the popup do not dismiss</div>
      <br />
      <a ng-click="ctrl.hidePopup()">Click here (or outside) to dismiss</a>
    </div>
  </div>
</body>

</html>
/* Put your css in here */

a:hover {
  text-decoration: underline;
}

.popup {
  display: inline-block;
  position: absolute;
  top:0.75em;
  border: solid black 1px;
  background: lightgray;
  padding:4px;
}
(function () {
    var module = angular.module('anyOtherClick', []);

    var directiveName = "anyOtherClick";

    module.directive(directiveName, ['$document', "$parse", function ($document, $parse) {
        return {
            restrict: 'A',
            link:  function (scope, element, attr, controller) {
                var anyOtherClickFunction = $parse(attr[directiveName]);
                var documentClickHandler = function (event) {
                    var eventOutsideTarget = (element[0] !== event.target) && (0 === element.find(event.target).length);
                    if (eventOutsideTarget) {
                        scope.$apply(function () {
                            anyOtherClickFunction(scope, {});
                        });
                    }
                };

                $document.on("click", documentClickHandler);
                scope.$on("$destroy", function () {
                    $document.off("click", documentClickHandler);
                });
            },
        };
    }]);
})();