Angular Bootstrap alerts do not dismiss on a timeout

Question

I am trying to add alerts from Angular Bootstrap and on timeout dismiss itself. However it does not dismiss itself. Here is the code:

angular.module('ui.services').service('AlertService', [
  function () {
    var alerts = [];
    this.add = function(type, msg){
        var self = this;            
        return alerts.push({
            type: type,
            msg: msg,
            close: function() {
                return self.closeAlert(this);
            }
        });
        $timeout(function(){ 
            self.closeAlert(this); 
        }, 3000);

    },
    this.closeAlert = function(alert) {
        return this.closeAlertIdx(alerts.indexOf(alert));
    },
    this.closeAlertIdx = function(index) {
        return alerts.splice(index, 1);
    },
    this.alertData = function() {
        return alerts;
    }
}]);

I have set the timeout but not sure what is wrong.

Answer 1

Your $timeout is never called because you return just before.

Otherwise, at a glance, everything seems to be correct.

Answer 2

https://github.com/angular-ui/bootstrap/blob/master/src/alert/alert.js#L22-L31

<alert dismiss-on-timeout='2000'>...</alert>