Angular + Bootstrap Alerts

How to dismiss bootstrap alerts while keeping them in the DOM, and how to change their type. The controller would change their type by setting $scope.alertType

by bseib

HTML

<div class="container">
 <div class="row">
  <div class="span5" ng-app="myApp" ng-controller="MyCtrl">

    <button class="btn btn-info" ng-class="{hide: !isHideAlert}" ng-click="isHideAlert=false;">Show the alert again...</button>

    <div ng-class="{hide: isHideAlert}">
        <div class="alert" ng-class="alertType">
            <button type="button" class="close" ng-click="isHideAlert=true;">×</button>
            {{alertMessage}}
        </div>
    </div>
      
    <h3>Change the alert type</h3>
      <button class="btn" ng-click="alertType='alert-error';">alert-error</button>
      <button class="btn" ng-click="alertType='alert-success';">alert-success</button>
      <button class="btn" ng-click="alertType='alert-info';">alert-info</button>
      <button class="btn" ng-click="alertType='';">default</button>

  </div>
 </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 40px;
    margin-left: 10px;
}
.hide {
    display: none;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.isHideAlert = false;
    $scope.alertMessage = "This is the alert message. Riveting, isn't it...";
});