title: ui.bootstrap angular alert close issue
body: <p>I am new to angular, trying to figure out how the bootstrap alert work in angular</p>
  
  <p>in regular bootstrap something below gives the alert message and it gets closed when clicked on X</p>
  
  <pre><code>&lt;div class="alert alert-success"&gt;
    &lt;a href="#" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/a&gt;
    &lt;strong&gt;Well Done!&lt;/strong&gt; Your action is successful.       
  &lt;/div&gt;
  </code></pre>
  
  <p>All the examples i saw are using AlertCtrl and needed to code the array of alerts and need to code a method to splice the array when close button clicked.</p>
  
  <p>In a Single Page Application, If i want to show only one success alert message when user perform an action</p>
  
  <pre><code>.directive('myCustomAlert', function(){
    return {
      restrict:'E',
      template:'&lt;alert type="success" close="close"&gt;{{model-dynamic-msg}}&lt;/alert&gt;',
      controller:'MyCtrl'
  } 
  </code></pre>
  
  <p>since the close attribute present the alert is displaying well. when added</p>
  
  <pre><code>&lt;my-custom-alert&gt;&lt;/my-custom-alert&gt; 
  </code></pre>
  
  <p>but not able to dismiss the message when clicked on x</p>
  
  <p>here is the plunker :  <a href="http://plnkr.co/edit/NfEleLc0Q6pzjirb3DCg" rel="nofollow">http://plnkr.co/edit/NfEleLc0Q6pzjirb3DCg</a></p>
  
  <p>am i missing to include any library.</p>