title: Looking for Angular Directive which enables model encapsulation
body: <p>Suppose I have a template like this:</p>
  
  <pre><code>    &lt;div&gt;
          &lt;div&gt;
              &lt;span&gt;Description:&lt;/span&gt;&lt;span&gt;{{YPOBatch.YarnPOBatch.YarnType.YarnTypeDesc}}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;span&gt;ID:&lt;/span&gt;&lt;span&gt;{{YPOBatch.YarnPOBatch.YarnType.YarnTypeID}}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;      
  </code></pre>
  
  <p>For purposes of writing clearer, easier to read and maintain code I want to be able to write something like:</p>
  
  <pre><code>    &lt;div ng-directive-that-I-am-at-a-loss-for="YPOBatch.YarnPOBatch.YarnType"&gt;
          &lt;div&gt;
              &lt;span&gt;Description:&lt;/span&gt;&lt;span&gt;{{YarnTypeDesc}}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;span&gt;ID:&lt;/span&gt;&lt;span&gt;{{YarnTypeID}}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;      
  </code></pre>
  
  <p>so that both code blocks will be equivalent. Is there an angular out of the box directive that can do what I want?</p>