Angular list select

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Angular list select demo</title>
    <!-- style -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="angular-list-select.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
    <script src="angular-list-select.min.js"></script>
    <script src="script.js"></script>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body id="home" ng-app="demo-app" ng-controller="MainController">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6 column">
                <h1 class="text-center">Demo of angular list select</h1>
                <list-select items="people" selected-items="selectedPeople" item-id="personId" item-template="itemTemplate.html" search="search-input"></list-select>
            </div>
        </div>
    </div>
</body>

</html>

.ls-container {
  display: inline-block;
  text-align: initial; }
  .ls-container .ls-items {
    float: left;
    margin-right: 50px; }
  .ls-container .ls-items,
  .ls-container .ls-selected-items {
    min-height: 200px;
    min-width: 150px;
    max-height: 200px;
    overflow: auto;
    display: inline-block;
    border: 1px solid #ddd; }
  .ls-container .ls-item,
  .ls-container .ls-selected-item {
    width: 100%;
    padding: 5px 10px; }
    .ls-container .ls-item:hover,
    .ls-container .ls-selected-item:hover {
      background-color: #eee;
      cursor: pointer; }
  .ls-container .search-bar-container {
    text-align: center;
    margin-top: 5px; }

/*! 
 * angular-list-select
 * https://github.com/nejcsever/angular-list-select
 * Copyright (c) 2016 Nejc Sever
 * License: MIT
 */
!function(){angular.module("angular-list-select",[]).directive("listSelect",function(){function e(e,i,t,s){var c=[],l=[];e.dirItems=e.items.map(function(e){return angular.copy(e)});var d=function(){c=[],l=[],e.dirItems.forEach(function(i){c.push(e.itemId(i))}),e.selectedItems.forEach(function(i){l.push(e.itemId(i))})};d(),e.itemClick=function(i){var t=e.itemId(i),s=c.indexOf(t);l.push(t),e.selectedItems.push(i),c.splice(s,1),e.dirItems.splice(s,1)},e.selItemClick=function(i){var t=e.itemId(i),s=l.indexOf(t);c.push(t),e.dirItems.push(i),l.splice(s,1),e.selectedItems.splice(s,1)}}var i={restrict:"EA",replace:!0,scope:{items:"=",selectedItems:"=",itemId:"=",itemTemplate:"@",search:"@"},link:e,template:'<div class="ls-container"><div><div class="ls-items"><div class="ls-item" ng-repeat="item in dirItems | filter:searchText" ng-click="itemClick(item)"><div ng-include="itemTemplate"></div></div></div><div class="ls-selected-items"><div class="ls-selected-item" ng-repeat="item in selectedItems" ng-click="selItemClick(item)"><div ng-include="itemTemplate"></div></div></div></div><div class="search-bar-container"><div ng-show="search"><input type="text" ng-model="searchText" ng-class="search" placeholder="Filter..."></div></div></div>'};return i})}();

.column {
	text-align: center;
}
.column h1 {
	margin-bottom: 40px;
}
.ls-container {
	margin: 0 auto;
	display: inline-block;
}
.item > .name {
	font-weight: bold;
}
.search-input {
	border-radius: 3px;
	border: 1px solid #eee;
}

angular.module('demo-app', ['angular-list-select'])
    .controller('MainController', ['$scope', function($scope) {
        $scope.people = [{
            id: 0,
            name: "Nejc",
            surname: "Sever"
        }, {
            id: 1,
            name: "Brandon",
            surname: "Faircloth"
        }, {
            id: 2,
            name: "Neil",
            surname: "Donoghue"
        }, {
            id: 3,
            name: "Aaron",
            surname: "Gwin"
        }, {
            id: 4,
            name: "Peter",
            surname: "Prevc"
        }, {
            id: 5,
            name: "Tina",
            surname: "Maze"
        }, {
            id: 6,
            name: "Loic",
            surname: "Bruni"
        }];
        $scope.selectedPeople = [];
        $scope.personId = function(person) {
            return person.id;
        };
    }]);

<div class="item">
	<div class="name">{{item.name}}</div>
	<div>{{item.surname}}</div>
</div>