title: AngularJS UI Tree - Single header for entire tree
body: <p>I'm using AngularJS UI Tree on my PUG template, and I need the first node to act like a header for the rest of the other nodes, which will be inside this header.</p>
  
  <p>Currently I'm doing it like this:</p>
  
  <pre><code>div(data-ng-controller="CategoryTreeController as ctController")
      div.tree-root(ui-tree="")
  
          // Header
          ol(ui-tree-nodes="" ng-model='ctController.header')
              li(ng-repeat="header in ctController.header" ui-tree-node="")
                  div(ui-tree-handle) {{header}}
  
                  // Categories (Child nodes of Header)
                  ol(ui-tree-nodes="" ng-model='ctController.categories')
                      li(ng-repeat="category in ctController.categories" ui-tree-node="")
                          div(ui-tree-handle) {{category}}
  </code></pre>
  
  <p>As you can see, I'm wrapping my header on my controller in an array, like this: <code>_self.header = [$scope.categoriesHeader];</code> and passing it to my <code>ng-model</code> and <code>ng-repeat</code>.</p>
  
  <p>Is there a cleaner solution without the use of <code>ng-repeat</code> (since it will always be a single header), and so I can still use the header as the first node of my tree?</p>