asynchronous loading causes issue with tagsinput plugin

Question

I am using bootstrap tagsinput plugin with angularJS.

To activate tagsinput machinery, it is simply required to add some data-role attributes

<input type="text" placeholder="add a tag" data-role="tagsinput">

which generate on the fly some html code. This works well. When I wrap this input inside this

<ul>
    <li ng-repeat="todo in todos">
        <input type="text" placeholder="add a tag" data-role="tagsinput">

the AngularJS part of the code works well. But when I wrap the input as so, the tagsinput plugin does not work anymore. After some testing, I am sure that the problem is related to the fact the page is rendered when the todos are fetched from the server. This asynchronous loading is for sure the issue because when the page is loaded and when I create some new todo with an data-roled input, the latter works well. So how can I deal with this loading. I hope I was clear...

Answer 1

So suppose you marked your inputs with class="myClass", then do the following

delete data-role="tagsinput" to have some simple

<input type="text" placeholder="add a tag">

and then use in your angular code

$(document).find(".myClass").each(
              function(){$(this).tagsinput({});}
          );

this should do the job