Angular: Empty Fiddle

http://angularjs.org/

by nidhin tt

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl">
  <multi-select ng-model="user.roles" available="roles" selected-label="Current roles" available-label="Available roles" display-attr="roleName"></multi-select>
    <div>{{ user.username }}'s roles: </div>
    <ul>
        <li ng-repeat="role in user.roles">{{ role.roleName }}</li>
    </ul>           
</div>

CSS

.multiSelect {
    overflow: auto;
	width:600px;
	
	
	
	
}
.multiSelect .mselect {
    margin-right: 20px;
    float: left;
	width:200px;
}
.multiSelect .text {
    clear: both;
    font-size: 11px;
}
.multiSelect label::after {
    content: ":";
}
.btn.mover {
    display: block;
    margin-top: 25px;
    vertical-align: top;
}
.btn.mover.left {
    padding: 4px 8px 4px 8px;
	background-color: #009900;
	border-color: #008400;
}
.btn.mover.right {
    margin-top: 9px;
    padding:  4px 8px 4px 8px;
	background-color: #009900;

}
.clrblk{
color:#000000;
font-size:16px;
font-weight:600;
}
/* demo css */

.fL
{
float:left !important;
}
.fR
{
float:right !important;
}
.width10p
{
width:8%;
padding-left:5px;
}
.leftms
{

width:36%;
}

JavaScript

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

myApp.controller('MyCtrl', function($scope) {
    $scope.roles = [
        {roleId: 1, roleName: "Administrator"},
        {roleId: 2, roleName: "Super User"}
    ];
    
    $scope.user = {
        userId: 1, 
        username: "JimBob",
        roles: [$scope.roles[0]]
    };
});

myApp.directive('multiSelect', function($q) {
  return {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      selectedLabel: "@",
      availableLabel: "@",
      displayAttr: "@",
      available: "=",
      model: "=ngModel"
    },
    template: '<div class="multiSelect">' + 
                '<div class="leftms fL ">' +
                  '<label class="control-label fL" for="multiSelectSelected">{{ availableLabel }} ' +
                      '({{ available.length }})</label>'+'<div class="clear"></div>'+
                  '<select id="multiSelectAvailable"  ng-model="selected.available" multiple ' +
                      'class="pull-left mselect " ng-options="e as e[displayAttr] for e in available"></select>' + '<div class="clear"></div>'+
                '</div>'  + 
                '<div class=" width10p fL" >' + 
                  '<button class="btn mover left" ng-click="add()" title="Add selected" ' + 
                      'ng-disabled="selected.available.length == 0">' + 
                    '<i class="icon-arrow-right clrblk">&gt;</i>' + 
                  '</button>' +
                  '<button class="btn mover right" ng-click="remove()" title="Remove selected" ' + 
                      'ng-disabled="selected.current.length == 0">' + 
                    '<i class="icon-arrow-left clrblk">&lt;</i>' + 
                  '</button>' +
                '</div>' + 
                '<div class="leftms fL">' + 
                  '<label class="control-label fL" for="multiSelectSelected">{{ selectedLabel }} ' +
                      '({{ model.length }})</label>' +'<div class="clear"></div>'+
                  '<select...