title: AngularJS + Bootstrap dismissable alert
body: <p>I want to create a dismissable alert using AngularJS and Bootstrap<br>
  This is my code<br>
  <strong>HTML</strong></p>
  
  <pre><code>&lt;div class="col-lg-9" ng-controller="manageProfile"&gt;
      &lt;form style="margin-top:80px"&gt;
          &lt;div class="alert alert-success alert-dismissible" ng-controller="dismiss" ng-show="successAlert == true"&gt;
              &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="dismissSuccess()"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
              Username Changed!
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label&gt;Display Name&lt;/label&gt;
              &lt;input type="text" ng-model="currentName" class="form-control" placeholder="Display Name"&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-md" ng-click="changeName()"&gt;Change Username!&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>AngularJS</strong></p>
  
  <pre><code>profile.controller('manageProfile', ['$scope', function($scope) {
  
      $scope.changeName = function() {
          var user = Parse.User.current();
          user.setUsername($scope.currentName);
          user.save(null, {
              success: function(user) {
                  $scope.successAlert = true;
                  $scope.$apply();
              },
              error: function(error) {
                  $scope.errorAlert = true;
                  $scope.$apply();
              }
          });
      };
  }]);
  
  profile.controller('dismiss', ['$scope', function($scope) {
  
      $scope.dismissSuccess = function(){
          $scope.successAlert = false;
          $scope.$apply();
      }
      $scope.dismissError = function(){
          $scope.errorAlert = false;
      }
  }]);
  </code></pre>
  
  <p>The concept is after I changed my username by clicking the <code>Change Username</code> button, it will set the value of <code>$scope.successAlert</code> to <code>true</code> and showing the dismissable bootstrap alert. After that, if I close the alert, it will trigger the <code>dismissSuccess()</code> and set the value of <code>$scope.successAlert</code> to <code>false</code>, so that if I change my username again (without reloading the page) it will show the alert again.<br>
  However, this code won't let me get the result I want</p>