UI-Grid and UI-Select with multi-select

angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.select'])
  .controller('MainCtrl', MainCtrl)
  .directive('uiSelectWrap', uiSelectWrap);

MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
  $scope.gridOptions = {
    rowHeight: 38,
    columnDefs: [
      { name: 'name' },
      { name: 'company' },
      {
        name: 'languages',
        cellTemplate: 'multiCell',
        editableCellTemplate: 'uiSelect',
        editDropdownOptionsArray: [
          'English',
          'French',
          'German',
          'Spanish'
        ]
      }
    ]
  };

  $http.get('data.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}

uiSelectWrap.$inject = ['$document', 'uiGridEditConstants'];
function uiSelectWrap($document, uiGridEditConstants) {
  return function link($scope, $elm, $attr) {
    $document.on('click', docClick);
    
    function docClick(evt) {
      if ($(evt.target).closest('.ui-select-container').size() === 0) {
        $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);
        $document.off('click', docClick);
      }
    }
  };
}

body {
  padding: 20px;
}

.grid {
  width: 600px;
  height: 250px;
}

.ui-grid-cell {
  overflow: visible;
  z-index: 99999;
}

.ui-grid-cell, ui-select-wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Make sure the container doesn't shrink too small */
.ui-select-container {
  min-width: 100px;
}

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

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <link data-require="ui-select@0.11.1" data-semver="0.11.1" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/ui-select/v0.13.2/dist/select.css" />
    <script data-require="ui-select@0.11.1" data-semver="0.11.1" src="https://cdn.rawgit.com/angular-ui/ui-select/v0.13.2/dist/select.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.css">
    
    <script src="https://cdn.rawgit.com/angular-ui/ui-grid.info/v3.0.7/release/3.0.7/ui-grid.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/ui-grid.info/v3.0.7/release/3.0.7/ui-grid.min.css" type="text/css" />
    
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-edit="" class="grid"></div>
    </div>
    
    <script type="text/ng-template" id="uiSelect">
      <ui-select-wrap>
        <ui-select multiple ng-model="MODEL_COL_FIELD" theme="select2" ng-disabled="disabled" append-to-body="true">
          <ui-select-match placeholder="Choose...">{{ $item }}</ui-select-match>
          <ui-select-choices repeat="item in col.colDef.editDropdownOptionsArray | filter: $select.search">
            <span>{{ item }}</span>
          </ui-select-choices>
        </ui-select>
      </ui-select-wrap>
    </script>
    
    <script type="text/ng-template" id="multiCell">
      <div class="ui-grid-cell-contents">
        {{ COL_FIELD.join(', ') }}
      </div>
    </script>
    
    <script src="app.js"></script>
  </body>

</html>

[
  {
    "name": "Hoover Mcmillan",
    "company": "Vetron",
    "languages": [
      "Spanish",
      "English"
    ]
  },
  {
    "name": "Higgins Bruce",
    "company": "Geekmosis",
    "languages": [
      "French"
    ]
  },
  {
    "name": "Cora Hayes",
    "company": "Aeora",
    "languages": [
      "English"
    ]
  },
  {
    "name": "Bauer Leon",
    "company": "Enquility",
    "languages": [
      "French",
      "German"
    ]
  },
  {
    "name": "Knox Olsen",
    "company": "Medicroix",
    "languages": [
      "English"
    ]
  },
  {
    "name": "Browning Drake",
    "company": "Prosure",
    "languages": [
      "Spanish"
    ]
  },
  {
    "name": "Madden Carter",
    "company": "Manglo",
    "languages": [
      "Spanish",
      "French"
    ]
  },
  {
    "name": "Sheree Dennis",
    "company": "Lexicondo",
    "languages": [
      "French"
    ]
  },
  {
    "name": "Roxie Parks",
    "company": "Futurity",
    "languages": [
      "Spanish"
    ]
  },
  {
    "name": "Schultz Norris",
    "company": "Cowtown",
    "languages": [
      "French",
      "German"
    ]
  },
  {
    "name": "Lloyd Mcneil",
    "company": "Prismatic",
    "languages": [
      "English",
      "French"
    ]
  },
  {
    "name": "Myrtle Jarvis",
    "company": "Marvane",
    "languages": [
      "English",
      "French",
      "German"
    ]
  },
  {
    "name": "Holmes Emerson",
    "company": "Comtext",
    "languages": [
      "French",
      "German",
      "English"
    ]
  },
  {
    "name": "Vanessa Sargent",
    "company": "Flumbo",
    "languages": [
      "Spanish",
      "German"
    ]
  },
  {
    "name": "Austin Gilliam",
    "company": "Comveyor",
    "languages": [
      "English"
    ]
  },
  {
    "name": "Mack Hays",
    "company": "Prowaste",
    "languages": [
      "French",
      "German"
    ]
  },
  {
    "name": "Charles Osborn",
    "company": "Nitracyr",
    "languages": [
      "English"
    ]
  },
  {
    "name": "Duke Barrett",
    "company": "Rodeology",
    "languages": [
      "French",
      "Spanish"
    ]
  },
  {
    "name": "Margarita Hodges",
    "company": "Apex",
    "languages": [
      "German",
      "French"
    ]
  },
  {
    "name": "Gallagher Forbes",
    "company": "Dogspa",
    "languages": [
      "English"
    ]
  }
]