title: Angular template won't load. Even with $loaded. Data resolves after Load
body: <p>Using AngularFire, Angular, Firebase.
  I load a list of users from a Firebase Database. I use $loaded to ensure it waits until data loads. 
  I take this list, compare it against another firebase database of groups and push the results into two arrays.
  Based on the console.logs the data sorts correctly. However, inside my template I get a blank page (I think this is because the page loads before the data is sorted).</p>
  
  <p>Thoughts?</p>
  
  <pre><code>    let userLoggedIn = AuthFactory.getUser();
  var allUsersArray = $firebaseArray(ConnectFactory.fbUserDb);
  var x = firebase.database().ref('groups');
  
  var friendArr = [];
  var notFriendArr = [];
  
  allUsersArray.$loaded().then(function(){
      angular.forEach(allUsersArray, function(user, i) {
  
              var haveIAdded = x.child(userLoggedIn).child(allUsersArray[i].uid).once('value').then(function (snap) {
                  if (snap.val() !== null) {
                      return true;
                  } else {
                      return false; 
                  }
              });
  
              var haveTheyAdded = x.child(allUsersArray[i].uid).child(userLoggedIn).once('value').then(function (snap) {
                  if (snap.val() !== null) {
                      return true;
                  } else {
                      return false; 
                  }
              });
  
              Promise.all([haveIAdded, haveTheyAdded]).then(function([you, they]) {
                  if (you &amp;&amp; they) {
                      console.log('We Are Friends', allUsersArray[i]);
                      friendArr.push(allUsersArray[i]);
                  } else {
                      console.log('not a friend ', allUsersArray[i]);
                      notFriendArr.push(allUsersArray[i]);
                  }
              });
      });
      $scope.friendList = friendArr;
      $scope.notFriendList = notFriendArr;
  });
  </code></pre>