AngularJS ng-show only triggering once

Question

I have the following HTML

    <div class="alert alert-danger col-sm-10 col-sm-offset-1" ng-show="showErrorMessage">
        <button data-dismiss="alert" class="close" ng-click="closeErrorMessage()">
            ×
        </button>
        <i class="fa fa-check-circle"></i>
        <strong>Error</strong> The following errors have occurred:
        <div ng-repeat="error in createResp.Errors">{{error}}</div>
    </div>

With the following inside my JavaScript

   $scope.showErrorMessage = false;

   $scope.search = function () {
        var createOrderResp = myData.create($scope.request);

        createOrderResp.$promise.then(function (r) {
            $scope.createResp = r;
            if ($scope.createResp.Errors.length > 0) {
                $scope.showErrorMessage = true;
            }
        }, function (r) {
            handleResourceError(r);
        });
    };

    $scope.closeErrorMessage = function () {
        $scope.showErrorMessage = false;
    };

So everything works fantastic the first time through. If the response contains errors then the div is shown. However after clicking the close button closeErrorMessage() and then performing it again the error alert does not show up even though the showErrorMessage flag turns to true.

Answer 1

The issue is with data-dismiss . It will remove entire alert block. Therefore triggering ng-show with variable in scope won't help, since there won't be an html part, that will need triggering.