AngularJS - Example - Multi - Select

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

<head>
  <meta charset="UTF-8">
  <title>Example - example of angular multi-select</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
  <script src="app.js"></script>
  
  <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body ng-app="staticSelect">
  <div ng-controller="ExampleController">
    <form name="myForm">
      <div class="col-md-6">
        <multi-select selected-items="selectedItems" options="options" field-name="Items" all-if-none="true"></multi-select>
      </div>
    </form>
  </div>
</body>

</html>

(function(angular) {
  'use strict';
  angular.module('staticSelect', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.selectedItems = [];

      $scope.options = [

        {id: 0, nome: "Option A"},
        {id: 1, nome: "Option B"},
        {id: 2, nome: "Option C"}

      ];

    }])

  .directive('multiSelect', function() {
    return {
      restrict: 'E',
      scope: {
        selectedItems: '=',
        options: '=',
        fieldName: '@',
        allIfNone: '='
      },
      template: "<div class='form-group'>" +
        "<label class='item-label'>{{fieldName}}:</label>" +
        "<select ng-model='item' ng-options='item.nome for item in options' ng-change='adicionaItem(item)' class='form-control combo-box'></select>" +
        "</div>" +
        "<div class='form-group'>" +
        "<fieldset>" +
        "<legend>{{fieldName}} selecionados</legend>" +
        "<div class='input-form'>" +
        "<span ng-show='!allIfNone && (!selectedItems || selectedItems.length == 0)' class='text-center'>Nenhuma item adicionado</span>" +
        "<span ng-show='allIfNone && (!selectedItems || selectedItems.length == 0)' class='list-item-selecionado'>Todos</span>" +
        "<span ng-repeat='selectedItem in selectedItems' class='list-item-selecionado'>{{selectedItem.nome}}" +
        "<span ng-click='removeItemAdicionado(selectedItem)' class='glyphicon glyphicon-remove'>" +
        "</span>" +
        "</span>" +
        "</div>" +
        "</fieldset>" +
        "</div>",
      controller: function($scope) {

        $scope.adicionaItem = function() {

          if ($scope.selectedItems.length !== 0 && $scope.selectedItems[0].nome === 'Todos')
            $scope.selectedItems = [];

          var item = {
            id: $scope.item.id,
            nome: $scope.item.nome
          };

          $scope.removeItem($scope.options, item);

          $scope.selectedItems.push(item);
          $scope.selectedItems = _.sortBy($scope.selectedItems, 'nome');
          $scope.item = undefined;

        };

        $scope.removeItemAdicionado = function(item) {

          $scope.removeItem($scope.selectedItems, item);
          $scope.adicionaItemRemovido(item);

        };

        $scope.adicionaItemRemovido = function(item) {

          $scope.options.push(item);
          $scope.options = _.sortBy($scope.options, 'nome');

        };

        $scope.removeItem = function(list, item) {

          if (!item)
            return;

          for (var i = 0; i < list.length; i++) {

            if (list[i] && list[i].nome === item.nome) {

              list.splice(i, 1);
              i--;

            }

          }

        };

      }

    };

  });
})(window.angular);

.list-item-selecionado {
  padding: 5px 5px;
  margin: 3px;
  background-color: #EEE;
  border-color: #EEE;
  border-radius: 4px;
  display: block;
  float: left;
  font-size: 12px;
}

.list-item-selecionado .glyphicon {
  cursor: pointer;
}