title: select dropdown in angularjs UI grid column not working for external editcellTemplate
body: <p>I created a dropdown inside a column of angularJS UI grid. Infact I took the same example as there in UI grid tutorial.ref:<a href="http://ui-grid.info/docs/#/tutorial/201_editable" rel="nofollow">http://ui-grid.info/docs/#/tutorial/201_editable</a>
  . Here I modified to apply my own template(partial.html) for editableCelltemplate . When I change the drop down value, it's not captured.
  app.js
  <a href="http://plnkr.co/edit/UMsOeeETHxbMMdZQry90?p=preview" rel="nofollow">http://plnkr.co/edit/UMsOeeETHxbMMdZQry90?p=preview</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'addressFormatter']);
   
  angular.module('addressFormatter', []).filter('address', function () {
    return function (input) {
        return input.street + ', ' + input.city + ', ' + input.state + ', ' + input.zip;
    };
  });
   
  app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.gridOptions = {  };
    $scope.editDropdownOptionsArrayValue = [{id:1, gender:'male'},
          {id:1, gender:'male'}
       ];
   
    $scope.gridOptions.columnDefs = [
      { name: 'id', enableCellEdit: false, width: '10%' },
      { name: 'name', displayName: 'Name (editable)', width: '20%' },
      { name: 'age', displayName: 'Age' , type: 'number', width: '10%' },
      { name: 'gender', displayName: 'Gender', editableCellTemplate: 'partial.html', width: '20%',
        cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: $scope.editDropdownOptionsArrayValue},
      { name: 'registered', displayName: 'Registered' , type: 'date', cellFilter: 'date:"yyyy-MM-dd"', width: '20%' },
      { name: 'address', displayName: 'Address', type: 'object', cellFilter: 'address', width: '30%' },
      { name: 'address.city', displayName: 'Address (even rows editable)', width: '20%',
           cellEditableCondition: function($scope){
           return $scope.rowRenderIndex%2
           }
      },
      { name: 'isActive', displayName: 'Active', type: 'boolean', width: '10%' },
      { name: 'pet', displayName: 'Pet', width: '20%', editableCellTemplate: 'ui-grid/dropdownEditor',
        editDropdownRowEntityOptionsArrayPath: 'foo.bar[0].options', editDropdownIdLabel: 'value'
      }
    ];
   
   
   
   $scope.msg = {};
   
   $scope.gridOptions.onRegisterApi = function(gridApi){
            //set gridApi on scope
            $scope.gridApi = gridApi;
            gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
              $scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
              $scope.$apply();
            });
          };
   
    $http.get('/data/500_complex.json')
      .success(function(data) {
        for(i = 0; i &lt; data.length; i++){
          data[i].registered = new Date(data[i].registered);
          data[i].gender = data[i].gender==='male' ? 1 : 2;
          if (i % 2) {
            data[i].pet = 'fish'
            data[i].foo = {bar: [{baz: 2, options: [{value: 'fish'}, {value: 'hamster'}]}]}
          }
          else {
            data[i].pet = 'dog'
            data[i].foo = {bar: [{baz: 2, options: [{value: 'dog'}, {value: 'cat'}]}]}
          }
        }
        $scope.gridOptions.data = data;
      });
  }])
   
  .filter('mapGender', function() {
    var genderHash = {
      1: 'male',
      2: 'female'
    };
   
    return function(input) {
      if (!input){
        return '';
      } else {
        return genderHash[input];
      }
    };
  })
  ;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
    width: 600px;
    height: 450px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select ng-model="gender" data-ng-options="d as d.gender for d in grid.appScope.editDropdownOptionsArrayValue"&gt;
  &lt;option value="" selected="selected"&gt;select&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>you can see when I change dropdown value the  </p>
  
  <pre><code>gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
              $scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
              $scope.$apply();
  </code></pre>
  
  <p>is not getting executed.</p>
  
  <p>The same is getting executed in I apply editableCellTemplate: 'ui-grid/dropdownEditor' the default template. But in case of custome it's not executed. Any workaround/solution/pointer will really helpful.</p>