AngularJS typeahead search results in a div

Question

I'm using bootstrap's typeahead for a text input that also has a button that pops a popular results popover.

I want the functionality of the typeahead, only that the results list will be displayed in a different div (inside the popover instead of under the text input).

Is there a way to set the 'container' for the the typeahead search results? (for example popover widget contains a 'container' option)

Something like this:

Text Field    Button          popover
________________________________________________________
|   Search...  | B |  Typeahead1    Popular Searches:  |
|--------------|---|  Typeahead2    Src1               |
                   |  Typeahead3    Src2               |
                   |  ....          ...                |
                   |___________________________________|

(would have been quicker to draw in photoshop but eh...)

Any thoughts of a good solution? I thought about a few ways: Modify/extend the typeahead plugin or use a hidden text input. I could go for jquery's autocomplete instead maybe. Any other (better) suggestions?

Note: I'm using jquery+angularjs+bootstrap

Answer 1

As far as I know the code of the typeahead directive from http://angular-ui.github.io/bootstrap/ (and I kind of know it since I've written it :-)) you won't be able to do what you are asking here only by configuration.

You will need to fork it and adapt for your needs. It should be pretty straightforward. Feel free to open a GitHub issue if you feel like anything should be change inside the directive to make it easier to extend.