<html ng-app>
<head>
<title>Multiple Select Drop-Down List using AngularJS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<script src="multiSelectCtrl.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="multiSelectCtrl">
<h3 class="title">Please select your favorite airlines:</h3>
<div class="multiple-select-wrapper">
  <div class="selected-items-box">
                            <span class="dropdown-icon"></span>
                            <ul class="items-list">
                                <li ng-repeat="airline in Airlines | filter: getSelectedItemsOnly| limitTo: 3">
                                    <img ng-src="{{airline.img}}" title="{{airline.name}}" alt="{{airline.name}}" />
                                </li>
                                <span ng-show="(Airlines | filter: getSelectedItemsOnly).length > 3" title="See more selections..">...</span>
                            </ul>
                        </div>
        <div class="list">
                 <ul class="items-list">
                        <li ng-repeat="airline in Airlines">
                                <input type="checkbox" ng-model="airline.selected" />
                                <img ng-src="{{airline.img}}" title="{{airline.name}}" alt="{{airline.name}}" />
				<span>{{airline.name}}</span>
			</li>
		</ul>
	</div>
</div>
</div>
</body>
</html>
function multiSelectCtrl($scope){
$('.selected-items-box').bind('click', function(e){
  e.stopPropagation();
  $('.multiple-select-wrapper .list').toggle('slideDown');
});

$('.multiple-select-wrapper .list').bind('click', function(e){
	e.stopPropagation();
});

$(document).bind('click', function(){
	$('.multiple-select-wrapper .list').slideUp();	
});
  
$scope.Airlines = [
  {selected: false, name:'SWISS', img:'http://s9.postimage.org/d9t33we17/Swiss.png'},
	{selected: false, name:'UNITED', img:'http://s9.postimage.org/ykqn85w5n/United.png'},
	{selected: false, name:'KLM', img:'http://s9.postimage.org/p7unhshsb/Klm.png'},
	{selected: false, name:'EL AL', img:'http://s18.postimage.org/oi8ndntud/image.gif'},
	{selected: false, name:'Ethiopian', img:'http://s9.postimage.org/hqlg2ks97/image.gif'}
];

$scope.getSelectedItemsOnly = function(item){
	return item.selected;
};
}
.multiple-select-wrapper {
  width: 190px;
  position: relative;
}
.multiple-select-wrapper .selected-items-box {
  box-shadow: inset 1px -1px 5px 0 #CCCCCC;
  -webkit-box-shadow: inset 1px -1px 5px 0 #CCCCCC;
  -moz-box-shadow: inset 1px -1px 5px 0 #CCCCCC;
  -o-box-shadow: inset 1px -1px 5px 0 #CCCCCC;
  cursor: pointer;
  border: solid 1px #C7C6C7;
  padding: 5px;
  height: 22px;
  background-color: #fff;
  border-radius: 5px;
  -mox-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}
.selected-items-box .items-list {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.selected-items-box .items-list li {
  display: inline;
}
.selected-items-box .items-list li img {
  display: inline;
  padding-left: 10px;
  height: 18px;
}
.selected-items-box .items-list li img {
  font-size: 20px;
}
.multiple-select-wrapper .list {
  display: none;
  height: 90px;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: solid 1px #C7C6C7;
  border-right: solid 1px #C7C6C7;
  border-bottom: solid 1px #C7C6C7;
  z-index: 9999;
  position: absolute;
  width: 99%;
  border-radius: 5px;
  -mox-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}
.list .items-list {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.list .items-list li {
  margin: 0;
  width: 100%;
  padding: 0;
  border-bottom: solid 1px #C7C6C7;
  padding: 5px;
  background-color: #fff;
}
.list .items-list li input {
  padding-left: 10px;
}
.list .items-list li img {
  padding-left: 10px;
  padding-right: 6px;
  height: 18px;
}
.list .items-list li span {
  color: #4A4A4A;
  font-size: 14px;
}
.dropdown-icon {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background-image: url("http://s18.postimage.org/ht23xn8id/menu_arrow_down.png");
  background-repeat: no-repeat;
  background-position: 0 center;
}
.title {
  color: white;
  background-color:black;
}