javascript - Angular $scope and ng-if/ng-show issue. Status not changing in the view -

i using firebase authentication on web app. have buttons on different pages want appear if admin logged in. i've been trying use ng-if on button show if loggedin = true. i've console logged stated of 'loggedin' , appears changing correctly, buttons not show up.

i can't figure out happening here life of me. i've checked out angular docs reading $scope, ngif, , ngshow directives, nothing clicking me. reviewed this stackoverflow post shows process came in first place. appears working people in thread, no joy me.

this code in controller:

app.controller('welcomectrl', function ($scope, welcomedata, $routeparams, $location) {  var ref = new firebase('https://mywebapp.firebaseio.com/');    //authentication check   var auth = new firebasesimplelogin(ref, function (error, user) {     if (error) {       // error occurred while attempting login       console.log(error);     }     // no user logged in      else if (user === null) {       console.log("not logged in");     }     // normal user logged in     else if (user.id !== "47f0b82c-59d2-4bcd-8arc-ecb438eb0163") {       console.log("you logged in normal user");     }     // admin logged in     else {       console.log("logged in admin");       $scope.loggedin = true;       console.log("logging scope.loggedin admin " + $scope.loggedin);     }   });    $scope.loggedin = false;   console.log("logging scope.loggedin " + $scope.loggedin);    var authcheck = function () {     console.log("logging scope in authcheck " + $scope.loggedin);     return auth.user !== null;   };   authcheck(); 

this html element doesn't seem changing appropriately:

<div ng-show="loggedin">   <a class="btn waves-effect waves-red" ng-href="/#/editwelcome/{{welcome._id}}">update   </a> </div> 

any idea i'm doing incorrectly? thank help.

first off, firebasesimplelogin deprecated. auth methods part of core firebase library. can use onauth callback implementation.

the reason you're not seeing $scope.loggedin value change because firebase's callbacks happen outside of angular's digest scope. need tell angular change either using $scope.$evalasync() or firebase's own angularfire library.

to use $evalasync, in last else block wrap $scope changes in function so:

    // admin logged in     else {       console.log("logged in admin");       $scope.$evalasync(function() {          $scope.loggedin = true;       });     }