title: Display an alert after submitting a form using angularjs
body: <p>I'm using AngularJS for a login form, and I'm making an API call to the server with username/password and display an alert.</p>
  
  <p><strong>login.jade</strong></p>
  
  <pre><code>// form
  input(type="submit",ng-click="submit()")
  div.alert(ng-show="showAlert",class="{{alert}}",ng-animate="{show: 'alert-show', hide: 'alert-hide'}")
  button(ng-click="showAlert = !showAlert") fadeIn
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>$scope.submit = function () {
    if ($scope.username != undefined &amp;&amp; $scope.password != undefined) {
      $http({
        method: 'POST',
        data: {
          username: $scope.username,
          password: $scope.password
        },
        url: 'api/login'
      }).
      success(function (data, status, headers, config) {
        if (data.auth) {
          $scope.alert = data.alert;
        } else {
          $scope.alert = data.alert;
        }
      }).
      error(function (data, status, headers, config) {
        // something else
      });
      $scope.showAlert = true;
    }
  }
  </code></pre>
  
  <p><code>data.alert</code> is the class of the alert (<code>alert-success</code>, <code>alert-warning</code>), but it instantly shows the alert, without fading. If I remove the <code>$scope.alert = data.alert</code>, everything works fine. I was thinking about having 2/3 <code>div.alert</code>, and having different scopes (<code>$scope.alert1</code>, <code>$scope.alert2</code>) but I'm sure there is a better way.</p>
  
  <p>Moreover, on the initial load, the <code>div.alert</code> is displayed then faded. I could set the alert on <code>display: none</code> when loading, but I was looking for a 'cleaner' way.</p>
  
  <p>English is not my native language, so I might have made mistakes, my apologies. Thanks.</p>