Angularjs data-ng-show not working

Question

I'm an Angular beginner and I cannot figure out why the following code is not working.

What I want to do is, display a message depending on the http api request.

I get to the http success part every time, and then I set the ng-show attribute , and since it's data bind I assume it should display the message, but it's not.

I have this controller

         #my controller
         $scope.Save = function(){
            $http({
                //some http request
            })
            .success(function(data, status, header, config){
              $scope.showSucessMessage = true;
              $scope.successMessage = "Sucessfully saved..";
            })
            .error(function(data, status, header, config){
              $scope.recipeErrors = data;
              $scope.showErrorMessage = true;
            });
          }  



    #my message html
    <div class="alert alert-success alert-dark" data-ng-show="showSuccessMessage">
      <button type="button" class="close" data-dismiss="alert">×</button>
      <strong>{{successMessage}}</strong>
    </div>

So, even my request is successful and comes to the success block (I checked from chrome dev tools) me message is not displaying. What am I missing?

Answer 1

You have a typo:

$scope.showSucessMessage = true;

should be "Success" with two c's

$scope.showSuccessMessage = true;