Delayed change in html when scope value changed

Question

See EDIT 3. I am currently building App using Angular and Firebase. But I have a bit of a problem. When I change scope value in the controller, the change doesn't affect in the html.

I want to use ng-if to show an error alert when error occured. I set the <div ng-if="isThereAnyError">{{errorMessage}}</div> And in my controller when there is an error I will set the scope value for isThereAnyError to true and errorMessage ="some error hint". These changes do not take effect on the html side, though it does show the change when I print the error in console.log.

Here is the complete html and the controller code

<h3 class="with-line">Ubah Password</h3>

<div class="row">
  <div class="col-md-6">
    <div class="form-group row clearfix">
      <label for="inputPassword" class="col-sm-3 control-label">Password</label>

      <div class="col-sm-9">
        <input ng-model="user.password" type="password" class="form-control" id="inputPassword" placeholder="" value="12345678">
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group row clearfix">
      <label for="inputConfirmPassword" class="col-sm-3 control-label">Confirm Password</label>

      <div class="col-sm-9">
        <input ng-model="user.repassword" type="password" class="form-control" id="inputConfirmPassword" placeholder="">
      </div>
    </div>
  </div>
</div>
<div class="alert alert-danger" ng-if="gagalubahpassword">{{messagegagalubahpassword}}</div>
<button ng-click="ubahPassword(user)" type="button" class="btn btn-primary btn-with-icon save-profile">
  <i class="ion-android-checkmark-circle"></i>Ubah Password
</button>

The controller.

$scope.ubahPassword = function(user){

  if(typeof user!='undefined'){
    if(user.password !='' && user.password === user.repassword){

      // $scope.gagalubahpassword = false;
      appAuth.currentUser.updatePassword(user.password).then(function() {
        // Update successful.
        console.log("password berhasil diubah");
      }, function(error) {
        // An error happened.
        console.log("password gagal diubah");
        console.log(error.message);
        $scope.messagegagalubahpassword = "Error : "+error.message;
        $scope.gagalubahpassword = true;
      });
    }else {
      $scope.messagegagalubahpassword = "Pastikan kolom password terisi dengan benar dan sama";
      $scope.gagalubahpassword = true;
      console.log("password tidak cocok");
    }
  }else{
    $scope.messagegagalubahpassword = "Pastikan kolom password terisi dengan benar dan sama";
    $scope.gagalubahpassword = true;


  }
}

The strange thing is, when I edit the text field, the html is updated, but that is it, if I don't do anything (change the text field value) then the html doesn't change.

I am new with angular, so any suggestion will be appreciated.

EDIT : I just figure it out that the problem is probably with the way I implement the code for Firebase, because I just noticed that the delay is happened only when the error is from the Firebase error callback. If the error is because the field is empty (the check before I made request to Firebase), everything is just work like want, the error message is showing. And unfortunately this is the only way I know how to use Firebase.

EDIT 2: here is the code I use to check if the fields match or not, or wheter the user input anything to input field or not

if(typeof user!='undefined'){  //to check if user actually input anything
//to check if password filed and repassword field is match
if(user.password !='' && user.password === user.repassword){

      // the code to change user password in firebase auth
      appAuth.currentUser.updatePassword(user.password).then(function() {
        // Update successful.
        console.log("password berhasil diubah");
      }, function(error) {
        // An error happened.
        // Error that come from firebase, the problem is only happen in this block.
        console.log("password gagal diubah");
        console.log(error.message);
        $scope.messagegagalubahpassword = "Error : "+error.message;
        $scope.gagalubahpassword = true;
      });
}else {
//change on this block is working just fine
  $scope.messagegagalubahpassword = "Pastikan kolom password terisi dengan benar dan sama";
  $scope.gagalubahpassword = true;
  console.log("password tidak cocok");
}
}else{ //change on this block is working just fine
$scope.messagegagalubahpassword = "Pastikan kolom password terisi dengan benar dan sama";
$scope.gagalubahpassword = true;
}

The behaviour is work exactly like I want it to. I mean, the error div with the message I updated from scope in controller is showing with no problem.

However, when the first and second if is check, and the app start executing these lines of code (the code that related to firebase)

appAuth.currentUser.updatePassword(user.password).then(function() {
        // Update successful.
        console.log("password berhasil diubah");
      }, function(error) {
        // An error happened.
        console.log("password gagal diubah");
        console.log(error.message);
        $scope.messagegagalubahpassword = "Error : "+error.message;
        $scope.gagalubahpassword = true;
      });

And that is when I realize it might be the problem with the way I implemented code for Firebase.

EDIT 3. I was able to make this work, but I don't know the explanations for this solution, so I will just leave it in this question rather then make an answer, so if someone came to this page or having the same problem can take this as a temporary solution before someone can explain it.

In the Firebase error callback, I added $scope.$apply() to force the app to update the html, it's work. But again, I don't know why, I assume that this is has something to do with digest cycle or something,

Answer 1

If you have wrapped your HTML inside ng-if, ng-switch ng-repeat.. or some other directive that creates new child scope, then your controller property is overridden by the new child scope. See this example

So best practice is to always have . in your model. Change your error holding model to hierarchical model to leverage the prototypical inheritance.

Change it like $scope.errorModel = {isThereAnyError:false, errorMessage : ''}, and then use it like :

<div ng-if="errorModel.isThereAnyError">{{errorModel.errorMessage}}</div>