<!DOCTYPE html>
<html ng-app="App">

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />
    <link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <link rel="stylesheet" href="https://rawgit.com/rajush/angular-dropdown-multiselect/master/dist/angular-dropdownMultiselect.min.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script data-require="angular.js@1.3.20" data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js"></script>
    <script src="https://rawgit.com/rajush/angular-dropdown-multiselect/master/dist/angular-dropdownMultiselect.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MyController">
    <div class="container">
      <a href="https://github.com/rajush/angular-dropdown-multiselect" target="_blank" class="title">Angular dropdown multiselect <i class="fa fa-github"></i></a>
      <div style="margin-top: 25px;">
        <dropdown-multiselect dropdown-config="config" model="selectedItems"></dropdown-multiselect>
      </div>
      <br>
       <pre> Selected Items = {{selectedItems | json}} </pre>
    </div>
  </body>

</html>

angular.module( 'App', [ 'dropdown-multiselect' ] )
.controller("MyController", function($scope){
    var options = [ {
          'Id': 1,
          'Name': 'Batman',
          'Costume': 'Black',
          'selected': true
      }, {
          'Id': 2,
          'Name': 'Superman',
          'Costume': 'Red & Blue'
      }, {
          'Id': 3,
          'Name': 'Hulk',
          'Costume': 'Green'
      }, {
          'Id': 4,
          'Name': 'Flash',
          'Costume': 'Red'
      }, {
          'Id': 5,
          'Name': 'Dare-Devil',
          'Costume': 'Maroon'
      }, {
          'Id': 6,
          'Name': 'Wonder-woman',
          'Costume': 'Red'
      }];
  
  $scope.config = {
      options: options,
      trackBy: 'Id',
      displayBy: [ 'Name', 'Costume' ],
      divider: ':',
      icon: 'glyphicon glyphicon-heart',
      displayBadge: true,
      height: '200px',
      filter: true,
      multiSelect: true,
      preSelectItem: true,
      preSelectAll: false
  };
});
/* Styles go here */

.title {
  font-size: 30px;
}