javascript - Bootstrap Typeahead Not Registering in AngularJS ng-view

Question

I am trying to get Twitter Bootstrap's Typeahead feature working inside of an AngularJS ng-view, but the Javascript call is not registering the service.

I am aware of AngularJS implementations of Bootstrap, but I have to use "raw" Bootstrap at the moment.

• AngularUI Bootstrap: does not fire an 'updater' event, and $watch causes odd side effects.
  • ng-change fires when typing & on a typeahead selection. I only want a typeahead selection.
  • $watch is not firing on a typeahead selection and attempts to find the right place to insert $digest have failed.
• AngularStrap: fires a single typeahead-updated event but does not distinguish where it came from in the case of multiple typeaheads (which I have).

If I set up a "HTML only" typeahead, it works:

<input type="text" id="textbox_EMPID" class="span6" placeholder="8675309" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona"'>

But if I set it up to initialize via Javascript, the Typeahead no longer appears.

HTML:

<input type="text" id="textbox_EMPID" class="span6" placeholder="8675309" data-provide="typeahead">

Javascript:

$('#textbox_EMPID').typeahead({
  minLength: 3,
  source: function (query, process) 
  {
    console.log("checking");
    // snipped $.get() call
  },
});

If I call other jQuery actions on field, it does work. For example, the following will hide the field when placed in the same <script> block:

$('textbox_EMPID').hide();

Calling the below does succeed, indicating that the typeahead function is available:

if(jQuery().typeahead) { alert("yes"); }

But the "source" section of the typeahead is never called. I left out the guts of a $.get() request, because the console.log() never appears either.

I moved this code over from a non-AngularJS page that I wrote, where it is working just fine. It is unclear to me what I am missing that would cause this to break inside an ng-view.

Answer 1

Waitting for answers