How to display ng-repeat dropdown with checkbox using angularjs

I want to display a dropdown with checkbox. And if clicked on selectall. Need to display all the value as selected.

When I click on outside or another dropdown the current opened dropdown should close.

$scope.selectedUserIds = [];
$scope.users = [
                { "id": 1, "name": "Ali" },
                { "id": 2, "name": "Sara" },
                { "id": 3, "name": "Babak" },
                { "id": 4, "name": "Sanaz" },
                { "id": 5, "name": "Dariush" },
            ];


<div class="row">
            <div class="col-xs-12">
                <label class="control-label l_font title field-name" for="aname" style="position: relative;"><b>Select Account *</b></label>
                <br>
                <dropdown-multiselect model="selectedUserIds" 
                options="accountlist" ng-click="getrolelist(selectedUserIds)"></dropdown-multiselect>
            </div>

        </div>

        <div class="row">
            <div class="col-xs-12">
                <label class="control-label l_font title field-name" for="aname" style="position: relative;"><b>Select Roles *</b></label>
                <br>
                <dropdown-multiselect model="selectedUserRoles" 
                options="userrolelist" ng-click="getroleinfolist(selectedUserRoles)" style="overflow-y: auto;"></dropdown-multiselect>
            </div>

        </div>

Directive I created to display dropdown with checkbox is :

app.directive('dropdownMultiselect', function () {
            return {
                restrict: 'E',
                scope: {
                    model: '=',
                    options: '=',
                },
                template:
                        "<style>.userselectdropdown{width: 220px;}</style><div class='btn-group' data-ng-class='{open : open}'>" +
                            "<button class='btn btn-small userselectdropdown' data-ng-click='openDropdown()'>Select...     <span class='caret' style='float: right; margin-top: 4%;'></span> </button>"+
                            "<ul class='dropdown-menu' aria-labelledby='dropdownMenu' style='max-height: 305px; min-width: 220px; overflow-y: auto;'>" +
                                "<li ng-show='!hideselectall' ng-hide='hidedeselectall'><a data-ng-click='selectAll()'><span class='glyphicon glyphicon-unchecked' aria-hidden='true'></span>Select All</a></li>" +
                                "<li ng-show='!hidedeselectall' ng-hide='hideselectall'><a data-ng-click='deselectAll();'><span class='glyphicon glyphicon-check' aria-hidden='true'></span> Select None</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> </a></li>" +
                            "</ul>" +
                        "</div>",

                controller: function ($scope) {                                        
                    $scope.hideselectall = true;

                    $scope.hidedeselectall = false;

                    $scope.openDropdown = function () {

                        $scope.open = !$scope.open;
                    };


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

                        $scope.hideselectall = false;

                        $scope.hidedeselectall = true;
                        angular.forEach($scope.options, function (item, index) {
                            $scope.model.push(item.id);
                        });
                    };

                    $scope.deselectAll = function () {
                        $scope.model = [];
                        $scope.hideselectall = true; $scope.hidedeselectall = false;
                    };

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

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

                    $scope.getClassName = function (option) {
                        var varClassName = 'glyphicon glyphicon-unchecked';
                        angular.forEach($scope.model, function (item, index) {
                            if (item == option.id) {
                                varClassName = 'glyphicon glyphicon-check';
                            }
                        });
                        return (varClassName);
                    };
                }
            }
        });