Close dropdown onclick outside in AngularJs - angularjs

Question

var app = angular.module('brandPortalApp');
app.directive('multiselectDropdown', function () {
return {
restrict: 'E',
scope: {
model: '=',
options: '=',
},
template:
"<div class='btn-group' data-ng-class='{open: open}' style='width: 200px;'>" +
"<button class='btn btn-small' style='width: 160px;' data-ng-click='openDropdown1();'>---Select---</button>" +
"<button class='btn btn-small dropdown-toggle' data-ng-click='openDropdown1();' style='width: 40px;' ><span class='caret'></span></button>" +
"<ul class='dropdown-menu' aria-labelledby='dropdownMenu' style='position: relative;'>" +
"<li style='cursor:pointer;' data-ng-repeat='option in options'><a data-ng-click='toggleSelectItem(option)'><span data-ng-class='getClassName(option)' aria-hidden='true'></span> {{option.barcode}}</a></li>" +
"</ul>" +
"</div>",
link: function (scope) {
scope.openDropdown1 = function () {
scope.open = !scope.open;
};
scope.selectAll = function () {
scope.model = [];
angular.forEach(scope.options, function (item, index) {
scope.model.push(item);
});
};
scope.deselectAll = function () {
scope.model = [];
};
scope.toggleSelectItem = function (option) {
var intIndex = -1;
angular.forEach(scope.model, function (item, index) {
if (item.id == option.id) {
intIndex = index;
}
});
if (intIndex >= 0) {
scope.model.splice(intIndex, 1);
} else {
scope.model.push(option);
}
};
scope.getClassName = function (option) {
var varClassName = 'glyphicon glyphicon-remove-circle';
angular.forEach(scope.model, function (item, index) {
if (item.id == option.id) {
varClassName = 'glyphicon glyphicon-ok-circle';
}
});
return (varClassName);
};
}
}
});
Hi.I am new to AngularJs.I created a multiselectDropdown using the above directive.Dropdown works fine.Now on click outside I need to close the dropdown. I have no idea how to proceed.Can anyone help.

Answer 1

to avoide popup close "data-backdrop="static" data-keyboard="false""
try opposite of this, you may get...

Answer 2

You can use clickOutside as below :
return {
restrict: 'A',
scope: {
clickOutside: '&'
},
link: function(scope, el, attr) {
$document.on('click', function(e) {
if (el !== e.target && !el[0].contains(e.target)) {
scope.$apply(function() {
scope.$eval(scope.clickOutside);
});
}
});
}
}

Answer 3

scope.settings = {
closeOnBlur: true
};
if (scope.settings.closeOnBlur) {
document.on('click', function (e) {
var target = e.target.parentElement;
var parentFound = false;
while (angular.isDefined(target) && target !== null && !parentFound) {
if (_.contains(target.className.split(' '), 'multiselect-parent') && !parentFound) {
if (target === dropdownTrigger) {
parentFound = true;
}
}
target = target.parentElement;
}
if (!parentFound) {
scope.$apply(function () {
scope.open = false;
});
}
});
}
Adding this in my directive made my dropdown close.