Angularjs 如何使HTML代码仅在加载firebase查询后显示

下面是我的angular JS webapp的JS：

 .controller('rulesCtrl', ['$scope','$location',
 function($scope,$location){


 var uid = CommonProp.userUid();

 firebase.database.ref('users').child(uid).child("fullname").once('value', 
 function(snapshot){
 var users = snapshot.val();
 $scope.fullname = users;
   },function(err) {
    console.log(err);

});

 $scope.logout = function(){
 CommonProp.logoutUser();  
}; 

下面是HTML代码：

<div ng-controller="rulesCtrl"> 
    <div class="container">
        <div class="row">
            <h1>Dear {{fullname}},</h1>
            <p ng-show=""> <br>
            The Players are divided into 4 positions, "DEFENDER", 
           "MIDFIELDER", "FORWARD", and a unique role for the 
            particularly versatile players, "HYBRID".<br/><br><br/></p>

亲爱的{{fullname}，


球员分为4个位置，“后卫”，
“中场”、“前锋”和一个独特的角色
特别是多才多艺的玩家，“混合型”。

我的问题

我的问题是，有时页面经常加载，

{{fullname}

代码在视图中显示为空，尽管控制台中的检查显示存在值

---

有没有办法确保

标记的内容仅在我的firebase查询产生的

{fullname}

得到解决后才显示？

问题是firebase代码在angular上下文之外，因此angular不知道在firebase承诺得到解决时作用域发生了变化

尝试将作用域分配包装在

$timeout（）

中，调用该函数时，将通过内部调用

$apply（）

触发摘要循环

firebase.database.ref('users').child(uid).child("fullname")
  .once('value', function(snapshot) {
    var users = snapshot.val();
    $timeout(function() {
      $scope.fullname = users;
    });
  }, function(err) {
    console.log(err);

  });

还要确保注入

$timeout