Even though I can successfully retrieve data from my Firebase database, the scopes in my AngularJS application aren't updating automatically. It seems like the issue lies within AngularJS, but I'm unable to pinpoint the exact cause.
Below is the function I use to fetch data from Firebase:
var userId = firebase.auth().currentUser.uid;
database.ref('/users/' + userId).on('value', function(snapshot) {
console.log(snapshot.val().user);
console.log(snapshot.val().weight);
console.log(snapshot.val().updated);
$scope.displayName = snapshot.val().user;
});
While the console.log output and scope.displayName are correct, the scope itself fails to update until a button is clicked. My goal is for it to update as soon as the database.ref operation is executed during page load.
The binding:
<p>{{displayName}}</p>