title: Show and Hide Alert Using AngularUI Directives for Bootstrap
body: <p>Am a newbie in the field of web design.
  I came across bootstrap and later angularjs. I find them quite impressive.
  I noticed that bootstrap comes with its own jquery libraries and angularjs uses its own jquery library.
  In order to avoid conflicts I opted to use angular-ui directives for bootstrap:
  [<a href="http://angular-ui.github.io/bootstrap/%5d%5b1%5d" rel="nofollow">http://angular-ui.github.io/bootstrap/][1]</a></p>
  
  <p>I have a basic form page and would like to display an alert when the sign in button is clicked. This is the html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang = "en" ng-app="ntula"&gt;
  &lt;head&gt;
        &lt;meta charset="UTF-8" /&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
  
       &lt;title&gt;NTULA&lt;/title&gt;
  &lt;/head&gt;
  &lt;body ng-controller="loginCtrl"&gt;
  &lt;div id="page"&gt;
      &lt;header class="container"&gt;
          &lt;div id="menu" class="navbar navbar-default navbar-fixed-top"&gt;
              &lt;div&gt;
                  &lt;h1&gt;NTULA&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;section id="body" class="container"&gt;
  
          &lt;form class="form-box"&gt;
              &lt;h1 id="head"&gt;Enter Details&lt;/h1&gt;
              &lt;div id="jina"&gt;
                  &lt;input type="email" class="form-control" placeholder="Email address" required="" autofocus=""&gt;
              &lt;/div&gt;
              &lt;div id="pass"&gt;
                  &lt;input type="password" class="form-control" placeholder="Password" required=""&gt;
              &lt;/div&gt;
                  &lt;button class="btn btn-lg btn-primary pull-right" ng-click="display()"&gt;Sign in&lt;/button&gt;
          &lt;/form&gt;    
      &lt;/section&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-3 show-grid"&gt;
          &lt;div class="alert collapse" id="alat" ng-class="{'alert-danger': true, 'alert-dismissable': closeable}"&gt;
              &lt;a href="#" class="close" ng-click="closeIt()"&gt;&amp;times;&lt;/a&gt;
              &lt;p&gt;Am appearing&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;              
  &lt;/div&gt;
  
  
  
  &lt;script type="text/javascript" src="js/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/ui-bootstrap-0.11.0.min.js"&gt;
  &lt;script type="text/javascript" src="js/site.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/controllers/loginctrl.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The alert is hidden at the start because I used the </p>
  
  <pre><code>class="alert collapse"
  </code></pre>
  
  <p>This is the javascript code for the controller:</p>
  
  <pre><code>var ting = angular.module("ntula",[]);
  
  ting.controller("loginCtrl", function loginCtrl($scope){
  
      /*scope.alerts = [];
  
      $scope.closeAlert = function(index) {
              $scope.alerts.splice(index, 1);
      };*/
  
  var it=$("#alat");
      $scope.display = function(){
          it.show();
      };
  
      scope.closeIt=function(){
          alat.hide();
      }
  });
  </code></pre>
  
  <p>My javascript appears to be all mixed and I don't know how to get it fixed.
  I would like to use the angularui directives but the code they have provided does not provide the functionality I need.</p>
  
  <p>Using their libraries I would like to:</p>
  
  <p>Show the alert when I click the button. (it is hidden at the start).
  Hide the alert when I click on the small 'x' it contains.</p>
  
  <p>I would like to hide and show the alert when needed and not hide and close the alert.</p>
  
  <p>If this was using the usual Bootstrap jquery library it would be something like this:</p>
  
  <pre><code>var wims=$("#alat");
      wims.show();
  
      wims.on("close.bs.alert", function(){
          wims.hide();
          return false;
      });
  </code></pre>
  
  <p>Does anyone have experience with the angularui directives for bootstrap library and know how to show an alert which is hidden when one clicks on a button? As, well as to hide an alert when a button is clicked?
  Thanks...</p>