bootstrap alert box in angular -empty

Question

I use bootstrap alert box for showing success message. After submit alert box with message is showing perfect, but problem is, before submit empty alert box is there. Thnx. here is code

$scope.resetPassword = function () {

        var data = {

            email: $scope.resetPasswordEmail

        };

        $http.post(serviceBase + 'aaaaaaaaaaaa', data).then(function (response) {

            $scope.successfullyReset = true;

            $scope.message = "Email has been send successfully, you will be redicted to login page in 5 seconds.";

            startTimer();

        }, function (response) {

            $scope.successfullyReset = false;

            $scope.message = "Failed to send mail. There is no user with requested email";



        });



    };

and html code is here

<div data-ng-hide="message == ''" data-ng-class="(successfullyReset) ? 'alert alert-success' : 'alert alert-danger'">

            {{message}}

        </div><br />

here is image, how this look before submit

Answer 1

the alert box is never hided because you define the variable message inside the callback, you should define it at the beginning of your controller instead.

 $scope.message = '';

bootstrap alert box in angular -empty

Sign up