AngularJS multiselect example

var app = angular.module('plunker', ['angularjs-dropdown-multiselect', 'pascalprecht.translate']);
app.config(["$translateProvider", function($translateProvider) {

  var en_translations = {
    "language": "Selected Language English",
    "greeting": "Welcome",
    "selectAll": "Select all",
    "selectNone": "Uncheck all"
  }

  var fr_translations = {
    "language": "Langue Francais choisi",
    "greeting": "Bienvenu",
    "selectAll": "Choisir tout",
    "selectNone": "Aucun"
  }

  $translateProvider.translations('en', en_translations);

  $translateProvider.translations('fr', fr_translations);

  $translateProvider.preferredLanguage('fr');

}]);
app.controller('MainCtrl', function($scope, $translate, $rootScope,  $timeout) {
  $scope.name = 'World';

  $scope.changeLanguage = function(lang) {
    $translate.use(lang);
  }
  $scope.cars = [{
    id: 1,
    label: 'Audi'
  }, {
    id: 2,
    label: 'BMW'
  }, {
    id: 1,
    label: 'Honda'
  }];
  $scope.selectedCar = [];

  $scope.fruits = [{
    id: 1,
    label: 'Apple'
  }, {
    id: 2,
    label: 'Orange'
  }, {
    id: 3,
    label: 'Banana'
  }];
  $scope.selectedFruit = null;

  $rootScope.$on('$translateChangeSuccess', function(event, current, previous) {
    // Language has changed
    $scope.unready = true;
    $timeout(function() {
      $scope.unready = false;
    }, 10);
  });
});

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="//code.angularjs.org/1.5.10/angular.min.js" data-semver="1.5.10"></script>

  <script src="//rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/dist/src/angularjs-dropdown-multiselect.js"></script>
  <script data-require="angular-translate@*" data-semver="2.5.0" src="//cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div>
    <button ng-click="changeLanguage('en')">English</button>
    <button ng-click="changeLanguage('fr')">French</button>
  </div>
  <h1>{{'greeting' | translate}}</h1>
  <div ng-if="!unready" ng-dropdown-multiselect="" options="cars" selected-model="selectedCar" extra-settings="mySettings" translation-texts="{
        'checkAll': ('selectAll' | translate),
        'uncheckAll': ('selectNone' | translate),
        'buttonDefaultText': myScopeVariable.selectZero,
        'selectionCount': myScopeVariable.selectCount,
        'dynamicButtonTextSuffix': myScopeVariable.selectSufix
    }">
  </div>
  <div class="well well-small">
    {{selectedCar}}
  </div>
  Single select:
  <multiselect class="input-xlarge" ng-model="selectedFruit" options="c.name for c in fruits" change="selected()"></multiselect>
  <div class="well well-small">
    {{selectedFruit}}
  </div>
</body>

</html>

/* Put your css in here */

multiselect {
    display:block;
}
multiselect .btn {
    width: 100%;
    background-color: #FFF;
}
multiselect .btn.error{
    border: 1px solid #da4f49 !important;
}
multiselect .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}
multiselect .dropdown-menu {
    width: 100%;
    box-sizing: border-box;
    padding: 2px;
}
multiselect .dropdown-menu > li > a {
    padding: 3px 10px;
    cursor:pointer;
}