How to update $rootScope in Angular 1 inside an async callback? - html

Question

I'm sure this is a very common issue but for some reason I can't find a solution that works.
I have a very simple setup with Firebase Realtime Database and Angular 1. I have this directive in my html
<div id="usersListWrapper" ng-controller="UsersListController" ng-init="loadUsersList()">
Then inside my loadUsersList() method, I make a call to Firebase Database to fetch the data
$rootScope.users = [];
var usersRef = firebase.database().ref('/users');
usersRef.on('value', function(snapshot) {
console.log("loaded users list");
var users = snapshot.val();
updateUsersTable(users);
});
Then finally, inside updateUsersTable(users), I update my $rootScope.users variable
var updateUsersTable = function(users) {
$.each(users, function(key, value) {
var user = {
username: key,
...
}
$rootScope.users.push(user);
}
}
However, even though the $rootScope.users variable updates correctly (I verified using the devtools inside Chrome), the html doesn't update :/
Apologies in advance if this is a duplicate question. Help would be appreciated.

Answer 1

$rootScope is not an appropriate place for you to be storing your user objects. Generally speaking, modifying $rootScope should be considered something you do when there are no other options.
What you should be doing is creating a userService and injecting it whereever you need access to user data.
The same advice is generally true for using ng-init as well. I'm guessing you're just getting started with Angularjs. I'd highly recommend you familiarize yourself with John Papa's Angularjs style guide: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md. It's a bit dated in that it doesn't cover components, which are EVERYTHING, but following the style guide makes migration to components super easy.

Answer 2

The solution here seems to work: Firebase callbacks and AngularJS
Kinda hacky but it works I guess. Thank you for those who answered.

Answer 3

As I mentioned in a comment above I would put the scope.$apply on the event listener b/c AngularJS doesn't know when the event is fired since it's not managing it. ie:
usersRef.on('value', scope.$apply(function () {
console.log("loaded users list");
var users = snapshot.val();
updateUsersTable(users);
}));
Or you could look into $evalAsync. From the AngularJS docs:
$evalAsync([expression], [locals]); Executes the expression on the
current scope at a later point in time.
The $evalAsync makes no guarantees as to when the expression will be
executed, only that:
it will execute after the function that scheduled the evaluation
(preferably before DOM rendering). at least one $digest cycle will be
performed after expression execution.