AngularJS: Object #<b> has no method 'typeahead'

[mariendries]

Hi

I'm trying to include the bootstrap-tagsinput with typeahead.js in my angularjs app.
This is the order of loading js items:

1. jQuery 2.0.3
2. angular 1.2.0
3. bootstrap-tagsinput.js
4. typeahead.min.js
5. bootstrap-tagsinput-angular.js
6. bootstrap.min.js
7. my App.js and this uses ['bootstrap-tagsinput', 'bsTagsinput']
8. bsTagsInput.js

But i can't get it to work

This is the html I use:

And this is in my controller:
$scope.tags = ['Amsterdam', 'Washington'];
$scope.tagsTypeahead = {
local: ['Sydney', 'Beijing', 'Cairo']
}

So I think I've got everything / more that I need, but I keep getting the error
"TypeError: Object # has no method 'typeahead'"

Any help on how to correctly implement this plugin would be greatly appreciated!

Thanks guys!

[timschlechter]

I'm not sure what's going wrong, but my advice would be not using bstagsinput.js for the moment. I pulled this in by a pull request as an alternative angularjs directive which you could try to use.

You should be able to make things works with bootstrat-tagsinput.js and bootstrap-tagsinput-angular.js, look at the examples patcfor working examples.

I'm planning on taking out the angularjs directive completely, and moving it to its own repository in the future, to keep thing neat and separated. I will also fix the having-2-directives-issue I created.

[mariendries]

Hi,
Have been trying for a while again, like you said with bootstrap-tagsinput.js and bootstrap-tagsinput-angular.js .
Still not working. Can't even create tags without typeahead.
Maybe caused by bootstrap 3.0.0?

Looking forward to an update!

[jrocket]

I'm not sure this is related to angular.js.
I 'managed' to replicate the "Object # has no method 'typeahead'" error with the following
jquery-1.10.2.min.js
bootstrap.min.js -> 3.0.2
typeahead.min.js -> 0.9.3
bootstrap-tagsinput.js -> latest

and followed the source from the exemple page

<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
<script>
$('input').tagsinput();

// Adding custom typeahead support using http://twitter.github.io/typeahead.js
$('input').tagsinput('input').typeahead({
  prefetch: 'citynames.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {  
  this.tagsinput('add', datum.value);
  this.tagsinput('input').typeahead('setQuery', '');
}, $('input')));
</script>