Embedding ui-select into ui-grid cell

app.js

app.run(['$templateCache', function ($templateCache) {

  /**
   * Cached Angular Template for ui-grid/uiSelect.
   * Allows to use in ui-grid as 'editableCellTemplate' field definition
   */
  $templateCache.put('ui-grid/uiSelect',
    '<ui-select-grid-cell-wrap>' +
    '<ui-select ng-model="MODEL_COL_FIELD" theme="selectize" ng-disabled="disabled" append-to-body="true">' +
    '<ui-select-match placeholder="Choose...">{{ $select.selected[editDropdownValueLabel] }}</ui-select-match>' +
    '<ui-select-choices repeat="item[editDropdownIdLabel] as item in col.colDef.editDropdownOptionsArray | filter: $select.search">' +
    '<div ng-bind-html="item[editDropdownValueLabel]|highlight: $select.search"></div>' +
    '</ui-select-choices>' +
    '</ui-select>' +
    '</ui-select-grid-cell-wrap>'
  );

}]);

colDef.js

'columnDefs': [

  {field: 'itemid', displayName: 'Name',
    editableCellTemplate: 'ui-grid/uiSelect',
    editDropdownIdLabel: 'itemid', editDropdownValueLabel: 'itemname',
    editDropdownOptionsArray: [{itemid: 1, itemname: "name1"}],
    cellTemplate:
      "<div class='ui-grid-cell-contents no-wrap'>" +
      "<span>{{row.entity.itemname}}</span>" +
      "</div>"
  }
]

uiSelectGridCellWrap.js

  /**
   * ui-select wrapper implementation for transforming "dropdown close" event into "cell edit finished" event
   * from within ui-grid cells
   */
  var uiSelectGridCellWrap = function ($document, uiGridEditConstants) {
    return function link($scope, $elm, $attr) {
      $document.on('click', documentClick);

      function documentClick(evt) {
        if ($(evt.target).closest('.ui-select-container').size() === 0) {
          $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);
          $document.off('click', documentClick);
        }
      }
    };
  };
  uiSelectGridCellWrap.$inject = ['$document', 'uiGridEditConstants'];
  dcimApp.directive('uiSelectGridCellWrap', uiSelectGridCellWrap);