AngularJS / UI Bootstrap - alerta de desvanecimiento en eliminar

Estoy usando Angular conUI Bootstrap. He creado la directiva personalizada que empuja alerst transmitido a la matriz de alertas vinculadas a la vista (representadas como alertas Bootstrap). Después del cierto tiempo de espera, las alertas se eliminan de la matriz (y, por lo tanto, de la vista). Aquí está el código:

angular.module('myApp')
  .directive('alerts', function ($timeout) {
    return {
      restrict: 'E',
      templateUrl: 'views/alerts.html',
      scope: true, /*share scope between alerts directives*/
      link: function (scope) {
        scope.alerts = [];

        scope.$on('alert', function (event, alert) {
          var newLength = scope.alerts.push({type: alert.type, msg: alert.message});

          $timeout(function() {
            scope.alerts.splice((newLength-1), 1);
          }, 3000);
        });
      }
    };
  });

Me pregunto si es posible agregar un fade out (o cualquier otra animación) a las alertas antes de eliminarlas. Cualquier ayuda y consejos serían apreciados!

Respuestas a la pregunta(2)

Su respuesta a la pregunta