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

Well it works, it's just dismissOnTimeout directive invokes close method of the alert directive controller. This controller in its turn uses outer scope close method. So you need to implement it with so that directive could call it:

<alert type="danger" close="closeAlert()" ng-if="show"        dismiss-on-timeout="2000">Something happened.</alert>

and in controller:

$scope.show = true;$scope.closeAlert = function(index) {    $scope.show = false;};

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

<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="2000" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</uib-alert>

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');

I never could get it to work. Here's a more straightforward approach:

Markup

<div uib-alert      data-closeable="true"   <!-- sets the 'x' on the right for closing -->     close="closeAlert()"    <!-- what the 'x' and the timeout will call -->     alert alert-{{ alert.level }}"   <!-- sets the color (e.g. 'success' or 'danger')  -->     ng-show="alert.show">   <!-- only show me when this is truthy -->     {{ alert.message }}</div>

Controller

$scope.closeAlert = function() {    $scope.alert.show = false;}$scope.showAlertForFiveSeconds = function(){    $scope.alert.message = 'Something went wrong!');    $scope.alert.level = 'danger';  // red    $timeout(closeAlert, 5000);  // close the alert in 5 seconds}

Essentially all I'm doing is manually setting a deferred call to close the alert and walking away.

Note that doing this also requires you to inject the Angular $timeout service into the controller up top.