title: How to add animation to angularjs uib-alert directive
body: <p>I want to add fade-in animation for new alerts pushed into array and fade-out for dismissed alerts.</p>
  
  <p>Alerts are dismissed automatically after 5 seconds.</p>
  
  <p>I've already included <code>angular-animate</code> <code>ui-bootstrap</code> and <code>ui-bootstrap-tpls</code> libraries.</p>
  
  <p>How can i get these animations working?</p>
  
  <p>See Demo: <a href="http://plnkr.co/edit/ecbCA7h2zVA4XnvUHfFX?p=preview" rel="nofollow">http://plnkr.co/edit/ecbCA7h2zVA4XnvUHfFX?p=preview</a></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;html ng-app="myApp"&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/1.5.0/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainController"&gt;
      &lt;h1&gt;Alert With Animation&lt;/h1&gt;
      &lt;uib-alert 
        ng-repeat="alert in alerts" 
        type="{{alert.type}}" 
        dismiss-on-timeout="5000" 
        close="alerts.splice($index, 1);"&gt;{{alert.msg}}
      &lt;/uib-alert&gt;
      &lt;input type='text' ng-model='msg' /&gt;
      &lt;button ng-click="addAlert(msg,'danger')"&gt;Add Alert&lt;/button&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h2>SCRIPT</h2>
  
  <pre><code>(function() {
  
    var app = angular.module("myApp", ['ui.bootstrap', 'ngAnimate']);
  
    app.controller("MainController", function($scope) {
  
      $scope.alerts = [];
  
      $scope.msg = "No Animation!";
  
      $scope.addAlert = function(msg, type) {
        $scope.alerts.push({
          msg: msg,
          type: type
        });
      };
  
    });
  
  }());
  </code></pre>