title: How to load (n>2)-level nested data from denormalized dataset with Firebase/AngularFire?
body: <p>Given a denormalized data structure like:</p>
  
  <pre><code>{
    "users" : {
      "-JMMXslDJkPYmgcwXUzP" : {
        "items" : [ "-JMMXYaWlg_ftL2sKsdp", ... ],
        "name" : "user0"
      },
      ...
    },
    "items" : {
      "-JMMXYac7EMZcr4LIL5u" : {
        "properties" : [ "-JMMWdpWig-L8oIqbeI1", ... ],
        "name" : "item0"
      },
      ...
    },
    "properties" : {
      "-JMMWdpe3WEyjnUM12o2" : {"name": "property0"},
      ...
    }
  }
  </code></pre>
  
  <p>I'm currently loading nested children like so:</p>
  
  <pre><code>&lt;ul ng-init="users = $ref('users')"&gt;
      &lt;li ng-repeat="user in users"&gt;
          &lt;h1&gt;{{ user.name }}&lt;/h1&gt;
          &lt;ul&gt;
              &lt;li ng-repeat="item_id in user.items" ng-init="item = $ref('items/'+item_id)"&gt;
                  &lt;h2&gt;{{ item.name }}&lt;/h2&gt;
                  &lt;ul&gt;
                      &lt;li ng-repeat="property_id in item.properties" ng-init="property = $ref('properties/'+property_id)"&gt;
                          &lt;h3&gt;{{ property.name}}&lt;/h3&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the plunker showing how unbearably slow loading becomes with only 3-levels-deep-nested data: <a href="http://plnkr.co/edit/yrRx2FYJEc5BM1MaSQDe?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/yrRx2FYJEc5BM1MaSQDe?p=preview</a></p>
  
  <p><strong>How can I speed up the loading/rendering of this data?</strong></p>
  
  <ul>
  <li>Note that the solution posted <a href="https://stackoverflow.com/a/21737084/888928">here</a> (creating one reference for each collection instead of each collection item) will not work for me, since any/all of my nested collections will be too big.</li>
  </ul>