Angular-UI Multiselect Checkbox Dropdown with Filtering, Check All, Uncheck All, etc

<html>    
    <head>
        <title>Angular Multiselect Checkbox Dropdown</title>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type='text/javascript' src="script.js"></script>
        <script type='text/javascript' src="https://rawgit.com/long2know/angular-directives-general/master/src/multiselect.js"></script>
    </head>
    
    <body ng-app="myApp">
        
        
        
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <span class="navbar-brand">Our Menu</span>
                    </div>
                </div>
            </nav>
        
        
        <div class="row" ng-controller="state1Ctrl as vm">
                    <div class="buttons col-lg-2">
                      <div class="buttons">
                        <button ng-click="vm.clear()">Clear Selections</button>
                      </div>
                    <br/>
                    </div>
        <div class="col-lg-2">
            <form>
                <div class="form-group">
                    <multiselect class="input-xlarge multiselect" ng-model="vm.option1" options="p.FKID as p.NevHU for p in vm.options1" select-limit="5"
                                 header="Select Stuff1" selected-header="options selected" multiple="true" required
                                 enable-filter="true" filter-placeholder="Filter stuff..">
                    </multiselect>
                </div>
        
                <div class="form-group">
                    <multiselect class="input-xlarge multiselect" ng-model="vm.option2" options="p.name as p.name for p in vm.options2" select-limit="5"
                                 header="Select Stuff2 Simple" selected-header="options selected" multiple="true" required
                                 enable-filter="true" filter-placeholder="Filter stuff..">
                    </multiselect>
                </div>
        
                <div>
                    <div>
                        Option1
                        <pre ng-bind="vm.option1 | json"></pre>
                    </div>
                    <div>
                        Option2 Simple
                        <pre ng-bind="vm.option2 | json"></pre>
                    </div>
                </div>
            </form>
        </div>
        </div>
        
    </body>
</html>

(function () {
    
    var myApp = angular.module('myApp', ['cica']);
    
    var cica = angular.module('myApp.controllers', []);

    

    var state1Ctrl = function () {
        //itt volt eredetileg a controller része
    };

    state1Ctrl.$inject = [];
    
    cica.controller('state1Ctrl', function(){
      var vm = this;

        vm.options1 = [{"FKID":1,"NevHU":"Motorgyár","NevDE":"Motorgyár DE"},{"FKID":7,"NevHU":"Járműgyár","NevDE":"Járműgyár DE"},{"FKID":61,"NevHU":"Szerszámgyár","NevDE":"Szerszámgyár DE"},{"FKID":63,"NevHU":"Kliens szolgáltatások","NevDE":"Kliens szolgáltatások DE"},{"FKID":64,"NevHU":"Üzleti szolgáltatások","NevDE":"Üzleti szolgáltatások DE"},{"FKID":68,"NevHU":"IT Biztonság","NevDE":"IT Biztonság DE"},{"FKID":69,"NevHU":"Telekommunikáció","NevDE":"Telekommunikáció DE"},{"FKID":1095,"NevHU":"Teszt","NevDE":"Teszt de"}];

        vm.options2 = [{"name":"IT HU","nameDE":"IT DE","on":false},{"name":"Motor","nameDE":"Motor nemet","on":false},{"name":"Fényezés","nameDE":"Fényezés DE","on":false},{"name":"Címke","nameDE":"Cimke DE","on":false},{"name":"Címke 2","nameDE":"Címke 2 DE","on":false},{"name":"Címke 3","nameDE":"Címke 3 DE","on":false},{"name":"TELEK","nameDE":"TELEK DE","on":false},{"name":"Teszt","nameDE":"Teszt DE","on":false},{"name":"Projektmanagement","nameDE":"Projektmanagement","on":false}];
        
        
        vm.clear = function() {
            vm.option1 = [];
            vm.option2 = [];
        };
    });


    myApp.run(['$log', function ($log) {
        $log.log("Start.");
    }]);
})()









































var app = angular.module('myApp', [
        'myApp.controllers',
        'long2know',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui']);
state1Ctrl.$inject = [];
    
    angular.module('app.controllers')
        .controller('state1Ctrl', state1Ctrl);
app.controller('state1Ctrl', function(){
  var vm = this;

        vm.options1 = [{"FKID":1,"NevHU":"Motorgyár","NevDE":"Motorgyár DE"},{"FKID":7,"NevHU":"Járműgyár","NevDE":"Járműgyár DE"},{"FKID":61,"NevHU":"Szerszámgyár","NevDE":"Szerszámgyár DE"},{"FKID":63,"NevHU":"Kliens szolgáltatások","NevDE":"Kliens szolgáltatások DE"},{"FKID":64,"NevHU":"Üzleti szolgáltatások","NevDE":"Üzleti szolgáltatások DE"},{"FKID":68,"NevHU":"IT Biztonság","NevDE":"IT Biztonság DE"},{"FKID":69,"NevHU":"Telekommunikáció","NevDE":"Telekommunikáció DE"},{"FKID":1095,"NevHU":"Teszt","NevDE":"Teszt de"}];

        vm.options2 = [{"name":"IT HU","nameDE":"IT DE","on":false},{"name":"Motor","nameDE":"Motor nemet","on":false},{"name":"Fényezés","nameDE":"Fényezés DE","on":false},{"name":"Címke","nameDE":"Cimke DE","on":false},{"name":"Címke 2","nameDE":"Címke 2 DE","on":false},{"name":"Címke 3","nameDE":"Címke 3 DE","on":false},{"name":"TELEK","nameDE":"TELEK DE","on":false},{"name":"Teszt","nameDE":"Teszt DE","on":false},{"name":"Projektmanagement","nameDE":"Projektmanagement","on":false}];
        
        
        vm.clear = function() {
            vm.option1 = [];
            vm.option2 = [];
        };
});

multiselect {
    display: block;
}

    multiselect > .btn-group {
        min-width: 180px;
    }

    multiselect .btn {
        width: 100%;
        background-color: #FFF;
    }

        multiselect .btn.has-error {
            border: 1px solid #a94442 !important;
            color: #db524b;
        }

    multiselect .dropdown-menu {
        max-height: 300px;
        min-width: 200px;
        overflow-y: auto;
    }

        multiselect .dropdown-menu .filter > input {
            width: 99%;
        }

        multiselect .dropdown-menu .filter .glyphicon {
            cursor: pointer;
            pointer-events: all;
        }

    multiselect .dropdown-menu {
        width: 100%;
        box-sizing: border-box;
        padding: 2px;
    }

    multiselect > .btn-group > button {
        padding-right: 20px;
    }

        multiselect > .btn-group > button > .caret {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid black;
            right: 5px;
            top: 45%;
            position: absolute;
        }

    multiselect .dropdown-menu > li > a {
        padding: 3px 10px;
        cursor: pointer;
    }

        multiselect .dropdown-menu > li > a i {
            margin-right: 4px;
        }

.glyphicon-none:before {
    content: "\e013";
    color: transparent !important;
}

# Angular-UI Multiselect Checkbox Dropdown

This is an Angular-based dropdown that displays checkboxes for multiselection.

### Links
  - [Blog](https://long2know.com/2015/07/angular-multiselect-dropdown/)
  - [Github](https://github.com/long2know/angular-directives-general)