javascript - Firebase Sign-In Listener in AngularJS Controller Not Being Triggered Immediately -

i using firebase authentication , have header included on of app's pages using angularjs's ng-include. included header has element should display avatar if there user logged-in. however, on page load user logged-in, avatar behaves in way should when there no user logged-in until angularjs model variable changed. once there change, function inside firebase.auth().onauthstatechanged takes effect, , avatar appears. additionally, avatar not update (reset default icon) when sign out button clicked. user sign out, there has model change before avatar resets. how can firebase.auth().onauthstatechanged function occur when authentication state changes , on page load?

html on page

<header ng-include="'/header.html'" ng-controller="headercontroller" ng-init="initappuserheader()"></header> 

relevent portion of header.html

<label id="user-button-label" for="show-user-panel">     <div id="user-button">         <div id="avatar">             <img id="avatar-image" alt="avatar" ng-hide="hideavaimg == true" ng-src="{{avaimgsrc}}" />             <div id="letter-avatar" ng-hide="hideletterava == true">{{letteravaletter}}</div>             <div id="no-user" class="fa fa-user" ng-hide="hidenousericon == true"></div>         </div>     </div> </label> 

imported controller

app.controller("headercontroller", function($scope) {     $scope.getgravatar = function(email) {         // ...     };     $scope.hidenousericon = false;     $scope.hideletterava = true;     $scope.hideavaimg = true;     $scope.avaimgsrc = null;     $scope.letteravaletter = null;     $scope.initappuserheader = function() {         firebase.auth().onauthstatechanged(function(user) {             if (user) {                 // user signed in.                 var displayname = user.displayname;                 var email = user.email;                 var emailverified = user.emailverified;                 var photourl = user.photourl;                 var uid = user.uid;                 var phonenumber = user.phonenumber;                 var providerdata = user.providerdata;                 $scope.hidenousericon = true;                 user.getidtoken().then(function(accesstoken) {                     if (photourl) {                         $scope.avaimgsrc = photourl;                         $scope.hideavaimg = false;                     } else {                         if (email) {                             $scope.avaimgsrc = $scope.getgravatar(email);                             $scope.hideavaimg = false;                             if (displayname) {                                 $scope.letteravaletter = displayname.charat(0);                                 $scope.hideletterava = false;                             } else {                                 $scope.letteravaletter = email.charat(0);                                 $scope.hideletterava = false;                             }                         } else {                             $scope.hideavaimg = true;                             if (displayname) {                                 $scope.letteravaletter = displayname.charat(0);                                 $scope.hideletterava = false;                             } else if (email) {                                 $scope.letteravaletter = email.charat(0);                                 $scope.hideletterava = false;                             } else {                                 $scope.hideletterava = true;                                 $scope.hidenousericon = false;                             }                         }                     }                 });             } else {                 // user signed out.                 $scope.hideavaimg = true;                 $scope.hideletterava = true;                 $scope.hidenousericon = false;                 $scope.avaimgsrc = null;                 $scope.letteravaletter = null;             }         }, function(error) {             console.log(error);         });     }; });