Angularjs click outside event not working in child directive - angularjs

Question

I'm trying to create a dropdown list inside of a button - when clicking the button the dropdown list should open.
I'm trying to get the list hidden with a click outside. The dropdown is actually closing when clicking outside, but it is also closed when clicking on the list - which is not expected.
How do I keep the list open when clicking inside the list?
stopPropagation is not a good solution to me since it corrupts the expected flow of the click event.
Appreciate your help.
http://next.plnkr.co/edit/1HousD8KytGept0o

Answer 1

I don't know why you have created so many directives to handle this task. I have edited 'onClickOutside' directive of your project in order to achieve what you have asked. Please refer to the following example.
app.directive('onClickOutside', ['$document', "$parse", function ($document, $parse) {
return {
restrict: 'A',
link: function (scope, element, attr, controller) {
function isDescendant(parent, child) {
var node = child.parentNode;
while (node != null) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
}
var anyOtherClickFunction = $parse(attr["onClickOutside"]);
var documentClickHandler = function (event) {
var isChild = element[0] && isDescendant(element[0], event.target);
var showList = true;
if (!isChild) {
if (element[0] == event.target) showList = true;
else showList = false;
}
scope.$apply(function () {
scope.showList = showList;
});
};
$document.on("contextmenu", documentClickHandler);
$document.on("click", documentClickHandler);
scope.$on("$destroy", function () {
$document.off("contextmenu", documentClickHandler);
$document.off("click", documentClickHandler);
});
}
};
}]);