Angular JS Switcharoo multiple select module

I have created a script for going a multiple select option in Angular without using a select box that you have to hold control in order to select multiple items.

Demo: http://jsfiddle.net/qwertynl/xfw9f/

Code on GitHub

Here is my code:

Javascript:

var switcharoo = angular.module('switcharoo', []).directive('multiSelect', function(){
    return {
        restrict: 'E',
        scope: {
            items: '=',
            default: '=',
            leftTitle: '@',
            rightTitle: '@'
        },
        templateUrl: "switcharoo.html",
        link: function(scope)   {
            scope.switchItem = function(item)   {
                var index = scope.default.indexOf(item);
                if(index == -1) {
                    //add it in
                    scope.default.push(item);
                }
                else    {
                    //remove it
                    scope.default.splice(index, 1);
                }
            }
        }
    };
})

switcharoo.directive('switchitem', function() {
    return {
        restrict: 'E',
        scope: {
            value: '='
        },
        template: '{{value}}'
    };
});

HTML Template:

    .switchBox .entBox {
        overflow:auto;height:8em; width:190px;border:1px solid black;float:left;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    .switchBox .entBox div:hover {
        background-color: #908f8f;
    }
    .switchBox .eBox2.entBox {
        background-color: #ccc9c9;
    }

    
        
            {{leftTitle}}
            {{rightTitle}}
        
        
            
                
                    
                
            
            
                
                     -1" value="value" ng-click="switchItem(key)">
                
            
        
    

Is there anything I can do to make my code sl

I really like your code, I only have 2 minor observations:

-
I understand the part where default has the default items. I am not sure that after initialization you should keep referring to the default variable ( from a naming perspective ), maybe call it selection instead of default ?

-
Related to the previous point, ng-if="default.indexOf(key) == -1" and ng-if="default.indexOf(key) > -1" only make sense during initialization. In my mind, it would be ideal to provide a isSelected( key ) that you can use for the ng-if. Not to mention that it will remove a > out of your HTML attribute and look better in Markup ;)

StackExchange Code Review Q#41095, answer score: 2