Angular UI select2 with tags not working inside custom directive

Question

Using the Angular UI Select2 directive, with tags defined on an input field. If the input is itself inside a custom directive, then it is not initialised correctly and the console gives an error:

query function not defined for Select2 tagging

I suspect this might be to do with the order in which the directives are compiled / linked vs when the select 2 function is called.

Maybe there is a simple workaround, perhaps using the compile function or a directive controller instead of a link function? Or maybe it is an issue with the Angular UI select2 directive.

I have made a plunker that displays the problem:

http://plnkr.co/edit/myE5wZ

So my question is - How do you get get select2 tags working from inside a custom Angular directive?

Answer 1

In the end I managed to find a solution I was happy with involving nesting two directives, that way the logic can be encapsulated inside the parent directive (not spilling out into the controller).

A Plunker of my solution is here for anyone who may stumble across the same issue:

http://plnkr.co/edit/ZxAPF5BzkgPtn9xddCRM