Ui-Grid with Ui-select inside a modal, the dropdown dissapear when you try to open the options

Question

I'm trying to use ui-select inside the ui-grid, i followed the steps of: http://brianhann.com/ui-grid-and-dropdowns/#more-287 and I've got no problem to do that, I mean he used a simple array instead of a complex JSON, but ok!!

My problem is when i try to creat this cenerio inside of a modal, when I click to edit the dropdown appears normally but when I click to open the dropdown to select a option, my ui-select disappear, can you guys help me? what I'm doing wrong?

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

  MainCtrl.$inject = ['$scope', '$http', '$uibModal'];
  function MainCtrl($scope, $http, $uibModal) {

 $scope.openModal = function(){
 var modalInstance = $uibModal.open({
            templateUrl: './modal.html',
            controller: 'ModalCtrl',
            size:'lg'
        });
  } 

 }

 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);
  }
}
};
}

ModalCtrl.$inject = ['$scope', '$http'];
function ModalCtrl($scope, $http){
$scope.gridOptions = {
rowHeight: 38,
columnDefs: [
  { name: 'name' },
  { name: 'age', type: 'number' },
  {
    displayName:'Gender',
    width:'150',
    field:'gender.option',
    editModelField: 'gender',
    editDropdownValueLabel: 'option',
    editableCellTemplate: 'uiSelect',
    editDropdownOptionsArray: [
      {id:1, option:'male'},
      {id:2, option:'female'},
      {id:3, option:'other'},
    ]
  }
 ]
 };

  $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;
});
}    

My plunker: Plunker

Answer 1

I solved the issue just using style="z-index:9999;", I noticed that the dropdown was there but behind the modal, so using the z-index solved the problem.