ag-grid with angular typeahead - angularjs

Question

I am trying to use Angular Typeahead (https://angular-ui.github.io/bootstrap/) with ag-grid (https://www.ag-grid.com/). I have set angularCompileRows to true and I have set up a cell editor for the typeahead, and the typeahead dropdown is being activated. However, the drop down list is hidden behind the other rows in the grid. How can I make sure that I can see the typeahead drop down over top of the other grid rows? I tried setting z-index to 9999 on the <ul> element using firebug, but the list was still hidden.
This is my Cell editor:
// function to act as a class
function TypeAheadCellEditor () {}
// gets called once before the renderer is used
TypeAheadCellEditor.prototype.init = function(params) {
// create the cell
this.eInput = document.createElement('input');
this.eInput.setAttribute("typeahead", "cardCode for cardCode in getCardCodes($viewValue)");
this.eInput.setAttribute("typeahead-loading", "loadCardCodes");
this.eInput.setAttribute("typeahead-wait-ms", "300");
this.eInput.setAttribute("ng-model", "selectedItemCode");
this.eInput.value = params.value;
};
// gets called once when grid ready to insert the element
TypeAheadCellEditor.prototype.getGui = function() {
return this.eInput;
};
// focus and select can be done after the gui is attached
TypeAheadCellEditor.prototype.afterGuiAttached = function() {
this.eInput.focus();
};
// returns the new value after editing
TypeAheadCellEditor.prototype.getValue = function() {
return this.eInput.value;
};

Answer 1

Add this to your css:
.ag-cell {
overflow: visible;
}

Answer 2

Did you try following options from uib-typeahead
typeahead-append-to $ (Default: null) - Should the typeahead popup be appended to an element instead of the parent element?
typeahead-append-to-body $ (Default: false) - Should the typeahead popup be appended to $body instead of the parent element?