title: TreeView with flat <li> structure
body: <p>I am creating a reusable TreeView component in AngularJS that takes following object as an input,</p>
  
  <pre><code>[
      {
          label: "1",
          children: [{
                  label: "1.1",
                  children: [{
                      label: "1.1.1",
                  }]
              },
              {
                  label: "1.2",
              }
          ]
      },
      {
          label: "2
      }
  ]
  </code></pre>
  
  <p>And should render a TreeView for that. For number of reasons, I want generated HTML structure to be made of flat 'li'</p>
  
  <p>E.g.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt; 1 &lt;/li&gt;
      &lt;li&gt; 1.1 &lt;/li&gt;
      &lt;li&gt; 1.1.1 &lt;/li&gt;
      &lt;li&gt; 1.2 &lt;/li&gt;
      &lt;li&gt; 2 &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Other Requirements:</p>
  
  <ul>
  <li>No programmatic flattening of the structure. It should be just a
  clever directive. </li>
  <li>Should go any level deep</li>
  </ul>
  
  <p>Here is the <a href="https://jsfiddle.net/dspTB/1340/" rel="nofollow noreferrer">jsFiddle</a> to play with. So far I am able to render the first level only. Thank you!</p>