title: AngularJS asynchronous directive compilation
body: <p>I'm writing an angularjs app (with a node/express backend). I have in my scope an object that gets populated (and repopulated) asynchronously via a service.</p>
  
  <p>The contents of the object is a series of "question" objects, which for simplicity have a "text" and a "type" attribute.</p>
  
  <p>What I'm trying to achieve is to be able to have an angular directive per type, and for these to render properly. So for example if the server returns [{type:'booleanquestion',text:'Is the sky blue?'}] I would create an element , and then the booleanquestion directive will kick in and render it appropriately.</p>
  
  <p>So far I have defined a "questionset" directive which works well, watching the questions collection and compiling the required stuff so the directives display correclt.y</p>
  
  <h2>Html</h2>
  
  <pre><code>&lt;div questionset="questions"/&gt;
  </code></pre>
  
  <h2>app.js</h2>
  
  <pre><code>...
  scope.questions = questions; // e.g. [{text: 'some text',type: 'boolean'}]
  </code></pre>
  
  <h2>directives.js</h2>
  
  <pre><code>angular.module('myApp').directive('questionset',function($compile){
      return {
          transclude: 'true',
          compile: function(element,attr,linker){
              return function($scope,$element,$attr){
                  var elements = [],
                      parent = $element.parent();
  
                  $scope.$watchCollection('questions',function(questions){
                      var block, i, childScope;
  
                      if(elements.length &gt; 0)
                      {
                          for( i = 0; i &lt; elements.length ; i++)
                          {
                              elements[i].el.remove();
                              elements[i].scope.$destroy();
                          }
                          elements = [];
                      }
                      if(!questions) return;
  
                      for(i = 0; i &lt; questions.length; i++)
                      {
                          childScope = $scope.$new();
                          childScope['question'] = questions[i];
                          var html = '&lt;div class="'+questions[i].type+'"/&gt;';
                          var e = angular.element(html);
                          block = {};
                          block.el = e;
                          block.scope = childScope;
                          $compile(e)(childScope);
                          element.append(e);
                          elements.push(block);
                      }
                  });
              }
          }
      }
  });
  
  // For example, one type might be "boolean"
  angular.module('myApp').directive('boolean',function($compile){
      return {
          restrict: 'AC',
          template: '&lt;div class="question"&gt;{{question.text}}&lt;/div&gt;',
          replace: true,
          link: function(scope,elem,attrs,ctrl){
              …….
         // for some reason, $compile will not be defined here?
          }
      };
  });
  </code></pre>
  
  <p>Whilst this is working OK, I have 2 questions</p>
  
  <p>1). Is this the "right" angular way to do this? This is my first angular project and it seems I've jumped in rather at the deep end (or that's how it feels anyway)</p>
  
  <p>2). My next goal is for the question.text to be able to contain HTML and for that to be "compiled". For example the text might be </p>
  
  <pre><code>"Is the &lt;strong&gt;sky&lt;/strong&gt; blue?"
  </code></pre>
  
  <p>I'm not sure how to make this work - as my comment in the code suggest, for some reason $compile is not being injected into my boolean directive. Perhaps this is because I've manually created that child scope for it? Is it right I'm trying to $compile again the contents of the element? I feel like this last bit is probably very simple, but I'm not seeing it.</p>