AngularJS UI-Grid and UI-Select to create dropdown with icons and text options

Question

I'm trying to use UI-Grid's editableCellTemplate option with UI-Select to create a custom dropdown menu that contains selection options consisting of a glyphicon and a name. I used this tutorial as inspiration and added a couple of things to make it work with icons but even though I can see icon and name in the dropdown, after I select an option it returns the bracketed code, not the icon with text. Here is my code:

index.html

<div ng-controller="MainCtrl">
   <div ui-grid="gridOptions" ui-grid-edit="" class="grid"></div>
</div>

uiSelect.html

<ui-select-wrap>
  <ui-select ng-model="MODEL_COL_FIELD" theme="selectize" ng-disabled="disabled" append-to-body="true">
    <ui-select-match placeholder="Choose...">{{ COL_FIELD }}</ui-select-match>
    <ui-select-choices repeat="item in col.colDef.editDropdownOptionsArray | filter: $select.search">
      <div><span class="glyphicon glyphicon-{{item.icon}}"></span>{{item.name}}</div>
    </ui-select-choices>
  </ui-select>
</ui-select-wrap>

JS

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: 'age',
      type: 'number'
    }, {
      name: 'level',
      editableCellTemplate: 'uiSelect',
      editDropdownOptionsArray: [
        { name: 'n/a', icon: 'user', value: 'N/A' },
        { name: 'actively learning', icon: 'paperclip', value: 'ACTIVELY LEARNING' },
        { name: 'doing', icon: 'compressed', value: 'DOING' },
        { name: 'ready to teach', icon: 'hourglass', value: 'READY TO TEACH' },
        { name: 'teaching', icon: 'blackboard', value: 'TEACHING' },
        { name: 'tool building', icon: 'cutlery', value: 'TOOL BUILDING' },
        { name: 'inventing', icon: 'compressed', value: 'INVENTING' }
      ]
    }]
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/v3.0.7/data/500_complex.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);
      }
    }
  };
}

I have also made a plunker. Any tips are appreciated. Thanks