More than one typeahead on the page, each one with a different template

Question

I know that it is possible to customize the templates of the ui.bootstrap.typeahead either by:

• declaring the 'typeahead-template-url' (for the internal 'typeahead-match.html' file) and/or
• using $templateCache to customize the outer template ('typeahead-popup.html').

My issue is that I want to have two typeaheads on the same page, but with different templates, both internal(typeahead-match.html) and external (typeahead-popup.html), is it possible?

Answer 1

Look at the angular-ui-bootstrap FAQ:

https://github.com/angular-ui/bootstrap/wiki/FAQ

The first item there is about the templates... most importantly if you use one of the files with -tpls- in the name, the templates are in-lined (added to the template cache as part of the JS file using HTML strings, thus no longer needing the html files).