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: '&lt;div&gt;{{value}}&lt;/div&gt;'
    };
});


HTML Template:

&lt;style&gt;
    .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;
    }
&lt;/style&gt;

&lt;label&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;th&gt;{{leftTitle}}&lt;/th&gt;
            &lt;th&gt;{{rightTitle}}&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr class="switchBox"&gt;
            &lt;td&gt;
                &lt;div class="entBox eBox1"&gt;
                    &lt;switchitem ng-repeat="(key, value) in items" ng-if="default.indexOf(key) == -1" value="value" ng-click="switchItem(key)"&gt;&lt;/switchitem&gt;
                &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;div class="entBox eBox2"&gt;
                    &lt;switchitem ng-repeat="(key, value) in items" ng-if="default.indexOf(key) &gt; -1" value="value" ng-click="switchItem(key)"&gt;&lt;/switchitem&gt;
                &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/label&gt;


Is there anything I can do to make my code slicker?
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) &gt; -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 &gt; out of your HTML attribute and look better in Markup ;)