<!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>
  </head>

  <body ng-app="app">
    <div ng-controller="MainCtrl">
      <br/>  
      <h3> Alpha (Default)</h3>
      <ng-list-select button-style="alpha" panel-style="alpha" selected-list="selectedListAlpha" key="name" available-list="availableListAlpha"></ng-list-select>
      <br/>
      <h3> Olive</h3>
      <ng-list-select button-style="olive" panel-style="olive" selected-list="selectedListOlive" key="name" available-list="availableListOlive"></ng-list-select>
      <br/>
      <h3> Sand</h3>
      <ng-list-select button-style="sand" panel-style="sand" selected-list="selectedListSand" key="name" available-list="availableListSand"></ng-list-select>
      <br/>
      <h3> Pearl</h3>
      <ng-list-select button-style="pearl" panel-style="pearl" selected-list="selectedListPearl" key="name" available-list="availableListPearl"></ng-list-select>
      <br/>
      <h3> Blue</h3>
      <ng-list-select button-style="blue" panel-style="blue" selected-list="selectedListBlue" key="name" available-list="availableListBlue"></ng-list-select>
      <br/>
   </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 = [];
  
  
  $scope.availableListAlpha = angular.copy($scope.availableList);
  $scope.selectedListAlpha = angular.copy($scope.selectedList);
  
  $scope.availableListOlive = angular.copy($scope.availableList);
  $scope.selectedListOlive = angular.copy($scope.selectedList);
  
  $scope.availableListSand = angular.copy($scope.availableList);
  $scope.selectedListSand = angular.copy($scope.selectedList);
  
  $scope.availableListPearl = angular.copy($scope.availableList);
  $scope.selectedListPearl = angular.copy($scope.selectedList);
  
  $scope.availableListBlue = angular.copy($scope.availableList);
  $scope.selectedListBlue = angular.copy($scope.selectedList);
});
/* Styles go here */