View is not refreshed after $scope is updated in Firebase promise

Question

I am using Ionic Framework and Firebase is my BaaS.

Controller:

.controller('ProfileCtrl', function($scope, AuthService, DatabaseService) {
 console.info('** ProfileCtrl **');
 var user = firebase.auth().currentUser;
 $scope.public = {};

 DatabaseService.getUserPublicInfo(user.uid)
 .then(function(infoSnap) {
   infoSnap.forEach(function(item) {
     $scope.public[item.key] = item.val();
   });
 });
})

Service:

.service('DatabaseService', function($q) {
  this.getUserPublicInfo = function(uid) {
   return firebase.database().ref('/users/'+uid+'/public/').once('value');
  }
}

In my HTML view I have the following:

<div><h3>{{public.firstname}} {{public.lastname}}</h3></div>

No error and when debugging, $scope.public.firstname as the correct value in it but nothing is displayed. I have a button in my HTML view ; when I click on it, it changes page but just before page switches, I see the firstname appearing. When I go back to my view, the firstname is well displayed.

I tried to wrap getUserPublicInfo in $scope.$apply() in my controller but I get the "$digest already in progress" error...

Please, help, it's driving me crazy !

Thanks in advance

Answer 1

I used $q to create a promise. By doing the initial Firebase promise is resolved within the Angular scope:

this.getUserPublicInfo = function(uid) {
  console.info('getUserPublicInfo - get user public information for uid: '+uid);
var deferred = $q.defer();

  firebase.database().ref('/users/'+uid+'/public/').once('value')
  .then(function(snap) {
    deferred.resolve(snap);
  })
  .catch(function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
}