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 src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/nidhishkrishnan/ngListSelect/master/ngListSelect.js"></script>
  <script src="script.js"></script>
  <link src="style.css"/>
</head>

<body ng-app="app">
  <div ng-controller="MainCtrl">
    <br/>
    <button class="btn btn-primary" ng-click="addPeopleModal()">Add People</button>
    <br/><br/>
    <b>Selected Peoples:</b>{{selectedPeople | json}}
  </div>
</body>

</html>

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

.controller('MainCtrl', function($scope, $modal) {
 
  $scope.selectedPeople = [];
  $scope.addPeopleModal = function() {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'myModal',
      backdrop : 'static',
      resolve: {
      selectedPeople: function () {
        return $scope.selectedPeople;
      }
    } 
    });

    modalInstance.result.then(function(selectedItem) {
      $scope.selectedPeople = selectedItem;
    }, function() {
    });

  };
})

.controller('myModal', ['$scope', '$modalInstance', 'selectedPeople',
  function($scope, $modalInstance, selectedPeople) {

    $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 = [];
    if(selectedPeople.length>0)
    {
      $scope.selectedList = angular.copy(selectedPeople);
      angular.forEach($scope.availableList, function(item, index)
      {
        $scope.availableList.splice(index, 1);
      });
    }

    $scope.ok = function(selectedList) {
      $modalInstance.close(selectedList);
    };

    $scope.cancel = function() {
      $modalInstance.dismiss('cancel');
    };

  }
]);

/* Styles go here */

<div class="modal-header">
  <h3>Add Peoples</h3>
</div>
<div class="modal-body">
  <ng-list-select button-style="alpha" panel-style="alpha" selected-list="selectedList" width="565px" key="name" available-list="availableList"></ng-list-select>
<br/>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok(selectedList)">Submit</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>