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

i'm sure common issue reason can't find solution works.

i have simple setup firebase realtime database , angular 1. have directive in html

<div id="userslistwrapper" ng-controller="userslistcontroller" ng-init="loaduserslist()"> 

then inside loaduserslist() method, make call firebase database fetch 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), update $rootscope.users variable

var updateuserstable = function(users) {     $.each(users, function(key, value) {         var user = {             username: key,             ...         }          $rootscope.users.push(user);     } } 

however, though $rootscope.users variable updates correctly (i verified using devtools inside chrome), html doesn't update :/

apologies in advance if duplicate question. appreciated.

$rootscope not appropriate place storing user objects. speaking, modifying $rootscope should considered when there no other options.

what should doing creating userservice , injecting whereever need access user data.

the same advice true using ng-init well. i'm guessing you're getting started angularjs. i'd highly recommend familiarize john papa's angularjs style guide: https://github.com/johnpapa/angular-styleguide/blob/master/a1/readme.md. it's bit dated in doesn't cover components, everything, following style guide makes migration components super easy.