title: angularjs: directive on-the-fly
body: <p>How can I achieve something like the following using angular? I've tried several techniques but the docs don't help much...</p>
  
  <pre><code>&lt;div id="#parent"&gt;
    &lt;!-- this is component definition, won't be rendered --&gt;
    &lt;component id="tbl"&gt;
      &lt;table&gt;
        &lt;tbody&gt;
          &lt;tr ng-repeat="item in env.items"&gt;&lt;td&gt;{{item.label}}&lt;/td&gt;&lt;/tr&gt;
        &lt;tbody&gt;
      &lt;/table&gt;
    &lt;/component&gt;
  
    ...
    &lt;!-- 
      this should only work if a component is registered within this parent, 
      ie '#parent' and would render the component as defined above
    --&gt;
    &lt;component ref="table" env="myCtx" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the controller would be something like this:</p>
  
  <pre><code>&lt;script&gt;
   //ctrl definition
   funcion Ctrl(scope) {
     scope.myCtx = { 
       items: [{label: "xxx"}, {label: "yyy"}]
     }
   }
  &lt;/script&gt;
  </code></pre>
  
  <p>Basically, I want to define a directive on-the-fly and I want it to be accessible only inside the <code>#parent</code> node (altough this is optional). I got stuck because I expected to be able to inject <strong>angular-aware</strong> html (ie, with <code>&lt;h1&gt;{{blah}}&lt;/h1&gt;</code>) either in the <code>compile</code> function or within the <code>transclude</code> function.</p>