ScrollableMultiselectDropdownCheckboxes

angular scrollable multiselect dropdown with checkboxes.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">



    <dropdown-multiselect dropdown-title="Select Filter" pre-selected="member.states" model="selected_items" options="states" tabindex="2"></dropdown-multiselect> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div>
    focused: {{focused}}
    </div>
    
</div>

CSS

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

JavaScript

'use strict';

var app = angular.module('myApp', ['app.directives']);

app.controller('AppCtrl', function ($scope) {
    $scope.states = [
    {
        "name": "Alabama",
        "id": "AL"
    },
    {
        "name": "Alaska",
        "id": "AK"
    },
    {
        "name": "American Samoa",
        "id": "AS"
    },
    {
        "name": "Arizona",
        "id": "AZ"
    },
    {
        "name": "Arkansas",
        "id": "AR"
    },
    {
        "name": "California",
        "id": "CA"
    },
    {
        "name": "Colorado",
        "id": "CO"
    },
    {
        "name": "Connecticut",
        "id": "CT"
    },
    {
        "name": "Delaware",
        "id": "DE"
    },
    {
        "name": "District Of Columbia",
        "id": "DC"
    }
];

    $scope.member = {
        states: [{
            id: "AL"
        }]
    };
    $scope.selected_items = [];
});

var app_directives = angular.module('app.directives', []);

app_directives.directive('dropdownMultiselect', function () {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
            pre_selected: '=preSelected',
            dropdownTitle: '@'
        },
        template: "<div class='btn-group' data-ng-class='{open: open}'>" +
        		"<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropDown()'  data-ng-focus='focused=true' data-ng-blur='focused=false'>{{dropdownTitle}}</button>" +
            "<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropDown()' data-ng-focus='focused=true' data-ng-blur='focused=false'><span class='caret'></span></button>" +
            "<ul class='dropdown-menu scrollable-menu' aria-labelledby='dropdownMenu'>" +
            "<li><input type='checkbox' data-ng-change='checkAllClicked()' data-ng-model=checkAll>(Select All)</li>" +
            "<li data-ng-repeat='option in options'> <input type='checkbox' data-ng-change='setSelectedItem(option.id)'...