Multiple Select DropDown List with AngularJS

<!DOCTYPE html>
<html>

  <head>
    <title>Multiple Select DropDown List with AngularJS</title>
    <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body ng-app="App">
    <div ng-controller="MultiSelectCtrl">
      <div style="float:right">
        <ul class="items-list">
          <li ng-repeat="friend in friends | filter: getSelectedItems">
          {{friend.name}}
      </li>
        </ul>
      </div>
      <div class="wrapper">
        <div class="selected-items-box">
        --- Pilih ---
                  <span class="dropdown-icon"></span>
        </div>
        <div class="list">
          <ul class="items-list">
            <li ng-repeat="friend in friends">
              <input type="checkbox" ng-model="friend.selected" />
              <span>{{friend.name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>

</html>

var app = angular.module('App', []).controller('MultiSelectCtrl', ['$scope',
    function($scope) {
  
    $('.selected-items-box').bind('click', function(e) {
        $('.wrapper .list').slideToggle('fast');
    });
      
    $scope.friends = [
      {name:'Lucky'},
      {name:'Yoga'},
      {name:'Fauzan'},
      {name:'Cecep'},
      {name:'Nurjaman'},
      {name:'Asti'},
    ];
    
    $scope.getSelectedItems = function(item){
        return item.selected;
    };
  }
]);

body{
  font-size:12px;
  font-family:Arial;
}

.wrapper {
  width: 200px;
  position: relative;
}
.wrapper .selected-items-box {
  cursor: pointer;
  border: solid 1px #ddd;
  padding:10px;
  background-color: #333;
  color: #ffffff;
}
.selected-items-box .items-list {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.selected-items-box .items-list li {
  display: inline;
}

.wrapper .list {
  display: none;
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: solid 1px #C7C6C7;
  border-right: solid 1px #C7C6C7;
  border-bottom: solid 1px #C7C6C7;
  z-index: 100;
  position: absolute;
  width: 100%;
}
.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;
}