title: ng-show/hide not working after successful Firebase login
body: <p>I have an issue with ng-show/hide not working after a successful Firebase login. I have a loggedIn variable in $rootScope as follows:</p>
  
  <pre><code>app.run(function($rootScope){
      $rootScope.loggedIn = false;
      console.log("loggedIn", $rootScope.loggedIn);
  }); 
  </code></pre>
  
  <p>And have injected $rootScope in my login controller like so:</p>
  
  <pre><code>app.controller("loginCtrl", ['$scope', '$rootScope', '$firebaseObject', function($scope, $rootScope, $firebaseObject){....
  </code></pre>
  
  <p>With that in place I have tested two login functions. The first is a dummy and doesn't actually go through the Firebase auth process but does show/hide the relevant elements in the view.</p>
  
  <p>The second goes through the <code>Firebase auth</code> fine and even logs the <code>$rootScope.loggedIn = true</code> exactly the same as the first dummy function. But the <code>show/hide</code> doesn't work.</p>
  
  <pre><code>        // This works
          $scope.logIn = function(){
                  $rootScope.loggedIn = true;
                  console.log("loggedIn", $rootScope.loggedIn);
          }
  
          // This doesn't work
          // logs into Firebase fine but ng-show/hide doesn't work
          $scope.logIn = function(){
              ref.authWithPassword({
                    email    : $scope.user.email,
                    password : $scope.user.password
                  }, 
                  function(error, authData) {
                    if (error) {
                      console.log("Login Failed!", error);
                    } else {
                      console.log("Authenticated successfully with payload:", authData);
                      // NEED TO FIX!!!
                      $rootScope.loggedIn = true;
                      console.log("loggedIn", $rootScope.loggedIn);
                    }
  
              });
          } 
  </code></pre>
  
  <p>Here is the ng-show/hide in the HTML</p>
  
  <pre><code>&lt;div class="login" ng-hide="loggedIn" ng-controller="loginCtrl"&gt;
      &lt;form class="form-signin"&gt;
        &lt;h2 class="form-signin-heading"&gt;Please sign in&lt;/h2&gt;
        &lt;label for="inputEmail" class="sr-only"&gt;Email address&lt;/label&gt;
        &lt;input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="user.email" required autofocus&gt;
        &lt;label for="inputPassword" class="sr-only"&gt;Password&lt;/label&gt;
        &lt;input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="user.password" required&gt;
        &lt;div class="checkbox"&gt;
          &lt;label&gt;
            &lt;input type="checkbox" value="remember-me"&gt; Remember me
          &lt;/label&gt;
        &lt;/div&gt;
        &lt;button class="btn btn-lg btn-primary btn-block" ng-click="logIn()"&gt;Sign in&lt;/button&gt;
      &lt;/form&gt;
      &lt;/div&gt;&lt;!-- ./login form --&gt;
  
    &lt;!-- main page container --&gt;
      &lt;div class="container" ng-controller="myCtrl"&gt;
  
          &lt;div class="main-content" ng-show="loggedIn"&gt;
              &lt;h1&gt;{{ pageTitle }}&lt;/h1&gt;
              &lt;hr&gt;
              &lt;div id="successNotice" class="alert alert-success" role="alert" ng-show="savedSuccess"&gt;
                  Musician saved successfully!
              &lt;/div&gt;
              &lt;table class="table table-striped"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;label&gt;Enter the name of your favourite musician&lt;/label&gt;
                          &lt;br&gt;
                          &lt;th&gt;
                              &lt;input class="form-control" placeholder="First Name" ng-model="dev.firstName" name="firstName"&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;input class="form-control" placeholder="Last Name" ng-model="dev.lastName" name="lastName"&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;button class="btn btn-success pull-right" &gt;
                                  &lt;span class="glyphicon glyphicon-plus" ng-click="add(dev)"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Firstname&lt;/th&gt;
                  &lt;th&gt;Lastname&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr ng-repeat="musician in musicians"&gt;
                          &lt;td&gt;{{ musician.firstName }}&lt;/td&gt;
                          &lt;td&gt;{{ musician.lastName }}&lt;/td&gt;
                          &lt;td&gt;
                              &lt;button class="btn btn-danger pull-right" ng-click="remove($index)"&gt;
                                  &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- ./main-content --&gt;
  </code></pre>
  
  <p>I know it's probably not the best or most secure way of performing this task and there should be more separation and fancy routing going on. But I just wanted to test it out as proof of concept before refactoring the business logic using better Angular practices. For the moment I'd like to know why this doesn't work. Thanks!</p>