AngularJS: Checkbox dropdown

Checkbox behavior using dropdown

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
    <table class="table table-hover">
        <tr ng-repeat="member in memberships">
            <td>{{member.id}}</td>
            <td>{{member.project.name}}</td>
            <td width="50">
                <dropdown-checkbox  pre-selected="member.roles" model="selected_checkbox" options="roles"></dropdown-checkbox>
            </td>
        </tr>
    </table>
    <br /><br />
    <pre>selectd roles = {{selected_roles}}</pre>
    <pre>master checked = {{master_checked}}</pre>
    <!-- <pre>roles = {{roles | json}}</pre> -->
    <pre>memberships = {{memberships | json}}</pre>
</div>

JavaScript

'use strict';

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

app.controller('AppCtrl', function($scope){                     
    $scope.roles = [
          {"id": 1, "name": "Manager", "assignable": true},
          {"id": 2, "name": "Developer", "assignable": true},
          {"id": 3, "name": "Reporter", "assignable": true}
    ];
    $scope.memberships = [
            {
                "id": 1,
                "deletable": true,
                "project": {
                    "id": 1,
                    "name": "eCookbook",
                    "identifier": "ecookbook",
                    "created_on": "2006-07-19T17:13:59Z"
                },
                "roles": [
                    {
                        "id": 2,
                        "name": "Developer",
                        "position": 2
                    }
                ]
            },
            {
                "id": 2,
                "deletable": true,
                "project": {
                    "id": 9,
                    "name": "My project",
                    "identifier": "opt",
                    "created_on": "2012-12-31T11:35:04Z"
                },
                "roles": [
                    {
                        "id": 2,
                        "name": "Developer",
                        "position": 2
                    },
                    {
                        "id": 3,
                        "name": "Reporter",
                        "position": 3
                    }
                ]
            },                      
        ];    
    
});

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

app_directives.directive('dropdownCheckbox', function(){
    return {
        restrict: 'E',
        scope: {
            row: '=',
            model: '=',
            options: '=',
            pre_selected: '=preSelected'
        },
        controller: function($scope){                        
            $scope.openDropdown =...