AngularJS Error When Wrapping JQuery Plugin In A Directive

I'm working on a directive for AngularJS that builds a taggable element and utilizes TagsInput Here's a working fiddle: http://jsfiddle.net/mgLss/ Not sure why but when I add that

Solution 1:

This is something related to the plugin you are using, it manipulates the dom in a way angular does not like it, I didn't to go into the source code the point you to the root of the issue, to be honest. But here is a way (an ugly one) to fix it.

<div ng:controller="TestCtrl">
    {{ hello }}
    <div><taggable default="changed"></taggable></div>
</div>
​

Just wrap that directive within another DOM element, making sure the plugin is isolated.

http://jsfiddle.net/mgLss/33/

Solution 2:

Building on @fastreload's answer, a slightly less ugly solution, which does not require changing your HTML:

// as per @fastreload, wrap input in a div to prevent Angular from getting confused
template: "<div><input type=\"text\"></div>",
link: function(scope, elm, attrs) {
    elm.children().tagsInput({      // note children()

You should also include Angular last in your fiddle (under Manage Resources) (and in your code in general), then elm is automatically a wrapped jQuery element, rather than a wrapped Angular element, and hence we don't need to use $(elm) in the link function.