ngListSelect- An Awesome AngularJS Bootstrap supported directive for add/remove functionality

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/nidhishkrishnan/ngListSelect/master/ngListSelect.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  
  <body ng-app="app">
    <div ng-controller="MainCtrl">
      <br/>     
      <ng-list-select button-style="ghost" panel-style="ghost" selected-list="selectedList" key="name" available-list="availableList"></ng-list-select>
      <br/>
      <br/>
      <b>availableList::</b>{{availableList | json}}
      <br />
      <b>selectedList::</b>{{selectedList| json}} 
   </div> 
  </body>    

</html>

angular.module('app', ['ngListSelect'])

.controller('MainCtrl', function($scope) {
  $scope.availableList = [{name: "Nidhish", email: "nidhish@gmail.com"},
                          {name: "John", email: "john@gmail.com"}, 
                          {name: "Avinash", email: "avinash@gmail.com"},
                          {name:"Priya", email: "priya@gmail.com"}, 
                          {name:"Anu", email: "anu@gmail.com"}, 
                          {name:"Manu", email: "manu@gmail.com"}];
                          
  $scope.selectedList = [];
});

.ghost {
  background-color: hsl(205, 28%, 26%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7c9db5", endColorstr="#2f4554");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#7c9db5), to(#2f4554));
  background-image: -moz-linear-gradient(top, #7c9db5, #2f4554);
  background-image: -ms-linear-gradient(top, #7c9db5, #2f4554);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7c9db5), color-stop(100%, #2f4554));
  background-image: -webkit-linear-gradient(top, #7c9db5, #2f4554);
  background-image: -o-linear-gradient(top, #7c9db5, #2f4554);
  background-image: linear-gradient(#7c9db5, #2f4554);
  border-color: #2f4554 #2f4554 hsl(205, 28%, 17.5%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.56);
  -webkit-font-smoothing: antialiased;
}

.ghost .panel-heading
{
  color: #fff !important;
}