单击外部下拉列表以选择多选

Question

使用以下代码，我无法在单击外部下拉菜单时关闭多选下拉列表。

按照代码中的注释进行了两种尝试，但仍然无法通过单击外部下拉菜单将其关闭。

代码：

 var MultiDirectivesApp = angular.module('Multi_DirectiveApp', []);

    MultiDirectivesApp.directive('dropdownMultiselect', ['$document', function ($document) {
        return {
            restrict: 'E',
            scope: {
                model: '=',
                options: '=',
            clickOutside: '&', // added for way 2
            },
            template:
                "<div class='btn-group' data-ng-class='{open: open}'>" +
                "<button class='btn btn-small'>Select...</button>" +
                "<button class='btn btn-small dropdown-toggle' data-ng-click='openDropdown()'><span class='caret'></span></button>" +
                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
                "<li><a data-ng-click='selectAll()'><span class='glyphicon glyphicon-ok green' aria-hidden='true'></span> Check All</a></li>" +
                "<li><a data-ng-click='deselectAll();'><span class='glyphicon glyphicon-remove red' aria-hidden='true'></span> Uncheck All</a></li>" +
                "<li class='divider'></li>" +
                "<li data-ng-repeat='option in options'><a data-ng-click='toggleSelectItem(option)'><span data-ng-class='getClassName(option)' aria-hidden='true'></span> {{option.PARTNAME}}</a></li>" +
                "</ul>" +
                "</div>",

           // controller: function ($scope) {

            link: function ($scope, element, attr) {

        // way 1
              //  element.bind('click', function (event) {
              //      console.log("event  " + event);
              //     event.stopPropagation();
              // });

              //  $document.bind('click', function () {
              //       $scope.isVisible = false;
              //      $scope.$apply();
              //  });

        // way 2
        $document.on('click', function (e) {
                if (el !== e.target && !el[0].contains(e.target)) {
                    $scope.$apply(function () {
                        $scope.$eval($scope.clickOutside);
                    });
                }
            });

                $scope.openDropdown = function () {
                    $scope.open = !$scope.open;
                };

                $scope.selectAll = function () {
                    $scope.model = [];
                    angular.forEach($scope.options, function (item, index) {
                        $scope.model.push(item.PART_ID);
                    });
                };

                $scope.deselectAll = function () {
                    $scope.model = [];
                };

                $scope.toggleSelectItem = function (option) {
                    var intIndex = -1;
                    angular.forEach($scope.model, function (item, index) {
                        if (item == option.PART_ID) {
                            intIndex = index;
                        }
                    });

                    if (intIndex >= 0) {
                        $scope.model.splice(intIndex, 1);
                    }
                    else {
                                         $scope.model.push(option.PART_ID);
                    }
                };

                $scope.getClassName = function (option) {
                    var varClassName = 'glyphicon glyphicon-remove red';
                    angular.forEach($scope.model, function (item, index) {
                        if (item == option.PART_ID) {
                            varClassName = 'glyphicon glyphicon-ok green';
                        }
                    });
                    return (varClassName);
                };
            }
        }
    }]);

注意：能够在下拉菜单中选择多个选项，并且没有任何选择问题，只有单击外部下拉菜单时关闭问题。