title: AngularJS/UI Bootstrap - fading out alert on remove
body: <p>I am using Angular with <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow">UI Bootstrap</a>. I've created the custom directive that pushes broadcasted alerst into the array of alerts that are bound to the view (rendered as Bootstrap alerts).  After the certain timeout the alerts get removed from the array (and hence from the view).  Here is the code:</p>
  
  <pre><code>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);
          });
        }
      };
    });
  </code></pre>
  
  <p>I am wondering whether it is possible to add a fade out(or indeed any other animation) to the alerts prior to removing them?  Any help and tips would be appreciated!</p>