title: Tree style options list in Angular
body: <p>I want a drop down <code>select</code> and <code>option</code> list which displays a tree, in that sub items are indented so its obvious to the user they are child items.  When I run this, literally nothing shows in the <code>select</code>.  Ideally Id like it to display <a href="http://jsfiddle.net/faatLLLk/" rel="nofollow">like this</a></p>
  
  <p>My second problem is that using padding within the options wont work I have to use <code>&amp;nbsp;</code>, but how can I pass nesting information down the template to output the required number of spaces?</p>
  
  <pre><code>&lt;script type="text/ng-template" id="tree_option_renderer.html"&gt;
      &lt;option&gt;{{data.Name}}&lt;/option&gt;
  
      &lt;!-- Would want 1 &amp;nbsp; per level to indent properly, how? --&gt;
      &amp;nbsp;&lt;option ng-repeat="data in data.Children" ng-include="'tree_option_renderer.html'"&gt;
  &lt;/script&gt;
  
  &lt;select id="folderList" ng-show="operatesOnSelector == 0"&gt;
      &lt;option ng-repeat="group in addressbook" ng-include="tree_option_renderer.html"&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>My data looks a little like this:</p>
  
  <pre><code>{
      Id: 0,
      Name: "Level 1",
      Children: [
          {
              Id: 1,
              Name: "level 2",
              Children: []
          }
      ]
  }
  </code></pre>