title: How can I pass around domNodes with bindings to other controllers/directives?
body: <p>I'm really new to Angular, but learning quickly. However, the one problem that I haven't been able to find an answer for yet is how I can pass around HTML snippets with bindings attached.</p>
  
  <p>e.g. With jQuery I could do something like</p>
  
  <pre><code>var $div = $('&lt;div id="test"&gt;&lt;button&gt;CLICK ME!&lt;/button&gt;&lt;/div&gt;');
  $div.delegate('button', 'click', function () { alert('CLICKED') });
  </code></pre>
  
  <p>Then I could pass around this <code>$div</code> variable to other objects. For instance I would use this pattern to separate page specific content from the code of a modal Singleton that encapsulated general functionality. </p>
  
  <p>e.g.</p>
  
  <pre><code>var name = "The Dude";
  var $div = $('&lt;div id="test"&gt;&lt;button&gt;CLICK ME!&lt;/button&gt;&lt;/div&gt;');
  $div.delegate('button', 'click', function () { alert('Hi, ' + name) });
  Modal.open({ content: $div});
  </code></pre>
  
  <p>How can I achieve something similar with Angular?</p>