title: Angular - Make nested list from JSON
body: <p>I have a set of JSON data that I would like to display in a nested list:</p>
  
  <p>The JSON comes in the following format:</p>
  
  <pre><code>["Item 1", "Item 2", "Item 3", ["Nested Item 1", "Nested Item 2"]]
  </code></pre>
  
  <p>The html should be:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
    &lt;li&gt;
      &lt;ul&gt;
        &lt;li&gt;Nested Item 1&lt;/li&gt;
        &lt;li&gt;Nested Item 2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I don't have control of the JSON, and it may be deeper than 2 levels.</p>
  
  <p>Of course, I tried this:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-repeat="item in data"&gt;{{item}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but it doesn't work because for nested items, it simply displays the json.</p>
  
  <p>How can I achieve nested lists in AngularJs? </p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/m7ax7tsa/" rel="nofollow">http://jsfiddle.net/m7ax7tsa/</a></p>