Render angular directives in Selectize.js items
<p>I am using <a href="https://github.com/machineboy2045/angular-selectize" rel="nofollow">angular-selectize</a> to use <a href="https://selectize.github.io/selectize.js/" rel="nofollow">Selectize.js</a> in my angular project.</p>

<p>To use custom items in Selectize.js selector, I am using Selectize.js' <a href="https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md#rendering" rel="nofollow">render</a> option:</p>

<pre><code>render: {
  item: function(item, escape) {
    var avatar = '&lt;div&gt;' +
        '&lt;span avatars="\'' + escape(item._id) +'\'" class="avatars"&gt;' +
        '&lt;/span&gt;' +
        escape(item.nick) +
      '&lt;/div&gt;';
    var compiledAvatar =  $compile(avatar)($rootScope);
    $timeout();
    return compiledAvatar.html();
  },
</code></pre>

<p>where avatars is a custom directive with asychronous behaviour</p>

<p>The problem is that the <code>render.item</code> function expects an HTML string as an output <em>but</em>:</p>

<ul>
<li>There is no way of returning a rendered or "<code>$compile</code>ed" HTML string in a synchronous way as expected by <code>render.item</code> method.</li>
<li>I do not know how to render that item's elements afterwards when they have already been added to the DOM.</li>
</ul>

<p>Note that although $compile is called, returned string would not be the expected compiled result but the string before compilation due to the asynchronous nature of $compile.</p>