title: How would I render a dynamic definition list using AngularJS?
body: <p>How would I render a dynamic definition list using AngularJS?</p>
  
  <p>Example:</p>
  
  <p>Data:</p>
  
  <pre><code>[
      {
          key: 'a',
          value: 'x'
      }, {
          key: 'b',
          value: 'y'
      }
  ]
  </code></pre>
  
  <p>Desired HTML:</p>
  
  <pre><code>&lt;dl&gt;
      &lt;dt&gt;a&lt;/dt&gt;
      &lt;dd&gt;x&lt;/dd&gt;
      &lt;dt&gt;b&lt;/dt&gt;
      &lt;dd&gt;y&lt;/dd&gt;
  &lt;/dl&gt;
  </code></pre>
  
  <p>The example at <a href="http://docs.angularjs.org/tutorial/step_08" rel="nofollow noreferrer">http://docs.angularjs.org/tutorial/step_08</a>:</p>
  
  <pre><code>&lt;dl&gt;
      &lt;dt&gt;Availability&lt;/dt&gt;
      &lt;dd ng-repeat="availability in phone.availability"&gt;{{availability}}&lt;/dd&gt;
  &lt;/dl&gt;
  </code></pre>
  
  <p>works for a dynamic number of dds and a static number of dts, but not a dynamic number of both.</p>