How to use Twitter typehead.js with Angular compile function?

Question

I am trying to use Twitter's typeahead.js (not the Bootstrap one) along with AngularJS. I can get it all up and running just fine, until I try to get fancy use the custom template and engine options.

If I use Twitter's own Hogan.js for templating, and pass in a string template via a script tag, I am able to render the custom results that I want, but it is just pure HTML and none of the Angular directives will work.

My question is, how can I utilize the typeahead.js library and render my own custom result, and also utilize Angular's powerful compilation and two way bindings. Here is a gist with some sample code to illustrate what I am trying to achieve. Any help would be greatly appreciated!

Gist with sample code: https://gist.github.com/i8ramin/5690826

Answer 1

I decided to use the Typeahead library from the UI Bootstrap Angular directives project instead. It doesn't really answer the question above, but thought it might be useful for others to know about the alternative approach.

Answer 2

You can switch what you use for bindings in Angular - Igor Minar answered a similar question here.

In addition, you could try tweaking the settings so that you can use Angular's template engine instead.