title: Custom Dropdown within Angular UI-Grid
body: <p>I'm playing around with the <a href="http://ui-grid.info/" rel="nofollow">new Angular UI-Grid</a>, and am having problems injecting a custom dropdown into a grid cell. <a href="http://ui-grid.info/docs/#/tutorial/315_editable_cascading_dropdown" rel="nofollow">The built-in dropdown functionality</a> doesn't work for my project since you can only go so far to style a SELECT tag. I'd like to use <a href="http://dotansimha.github.io/angularjs-dropdown-multiselect/#/" rel="nofollow">this swanky multi-select dropdown</a>, but it looks like the ui-grid's magic is either stopping my open dropdown event from propagating or my dropdown isn't able to be initialized on the fly. </p>
  
  <p>Here's my example code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
      &lt;div ui-grid="gridOptions" ui-grid-edit class="grid"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;`
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'angularjs-dropdown-multiselect']);
  
  app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
    var grid;
  
      $scope.msData = [ {id: 1, label: "David"}, {id: 2, label: "John"}, {id: 3, label: "Danny"}];
      $scope.msSettings = {enableSearch: true, smartButtonMaxItems: 3, smartButtonTextConverter: function(itemText, originalItem) {return originalItem.id;}};
  
    $scope.gridOptions = {
      enableCellEditOnFocus: true,
      columnDefs: [
        { field: 'name'}
        ,{ name: 'friends', displayName: 'Friends', editableCellTemplate: 'temp.html', width: '250', editDropdownValueLabel: 'friends'}
      ],
      onRegisterApi: function( gridApi ) {
        grid = gridApi.grid;
      }
    };
  
    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });
  
  }]);
  </code></pre>
  
  <p>temp.html (edit cell template):</p>
  
  <pre><code>&lt;div ng-dropdown-multiselect="" options="msData" selected-model="MODEL_COL_FIELD" extra-settings="msSettings" checkboxes="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When you double click the Friends cell, the select dropdown button appears, but clicking it doesn't expand the dropdown.</p>
  
  <p><a href="http://plnkr.co/edit/P4ONEaB7sDijFdUXXXNF?p=preview" rel="nofollow">Here is a plunker</a></p>
  
  <p>I've played around with a couple of other ways of doing a dropdown, but all have the same issue where the base element (button, link, etc) appears but the dropdown doesn't expand.</p>
  
  <p>Does anyone have any suggestions for how to stop the ui-grid from intercepting my click event (if that actually is what is causing the problem)? Or have any of you fine people implemented a similar custom dropdown in ui-grid before?</p>