Angular UI Bootstrap typeahead-append-to

Question

I'm trying to append the Angular UI Typeahead control to a custom element in my HTML. The docs state this:

typeahead-append-to $ (Default: null) - Should the typeahead popup be appended to an element instead of the parent element?

I cannot for the life of me figure what to set this value to! I have tried all combinations of '#elementId' and '.elementClass' but still having no luck.

I can append to the body no probs with typeahead-append-to-body="true", but that's not what I want to do.

Help please!

Cheers

Answer 1

(UPDATE: The user-selected answer to this question has since been updated with an addendum that includes the current, correct way to accomplish this.)

So, sorry to necropost, but I was looking at this today and thinking that the selected solution seemed strange, and banged my head against it for a few hours. While the selected solution may have been true at one point, as of right now it is not at all necessary to reference a scope property that references a DOM object. All you have to do is pass a selector (I tried an ID-- other selectors might get sketchy) but wrap it in single-quotes inside your double-quotes in the attribute. So:

<input uib-typeahead="val for val in vals" typeahead-append-to="#myTargetElement" />

won't work but

<input uib-typeahead="val for val in vals" typeahead-append-to="'#myTargetElement'" />

will work. Note the extra single-quotes: " ' #myTargetElement ' ".

Answer 2

OUTDATED SEE THE EDIT SECTION FOR LATEST APPROACH

The typeahead-append-to attribute expects you to reference an element in your controller and bind to that:

$scope.appendToElement = window.document.querySelector('body');

<input uib-typeahead="val for val in vals" typeahead-append-to="appendToElement" />

The code in the typeahead directive that reads the attribute and appends the element can be seen here

EDIT

The directive has been updated and will accept a selector string like so:

<input uib-typeahead="val for val in vals" typeahead-append-to="'#appendToElement'" />