AngularJS Bootstrap alert dismiss-on-timeout attribute doesn't work

Question

I\'m trying to use AngularJS Bootstrap alerts like explained here with the \"dismiss-on-timeout\" attribute. It has no effect in this example, the alert just appears regular

Answer 1

Actually, you do not need to use the variable ($scope.show = false;) to hide the alert(s). All you need to do is to make sure that the array that holds the alerts can only have one item at a time, unless you want multiple/previous alerts showing on the screen. Just delete the alert after showing it. See below:

Markup

{{alert.msg}}

Controller

//array to hold the alerts to be displayed on the page
$scope.alerts = [];

/**
 *This function is used to push alerts onto the alerts array.
 */
$scope.addAlert = function(type, message) {

    //add the new alert into the array of alerts to be displayed.
    $scope.alerts.push({type: type, msg: message});
};

/**
 *This function closes the alert
 */
$scope.closeAlert = function(index) {

    //remove the alert from the array to avoid showing previous alerts
    $scope.alerts.splice(0); 
};

So when you want to display an alert:

$scope.addAlert('success', 'My message');