Strategy for creating Bootstrap styled flash messages in an AngularJS app.

alert.html

<!-- Alerts are easily shown using the below syntax.
     This HTML snippet can be used to display all Bootstrap alert styles. -->


<div ng-show='alert'  class="alert alert-{{ alert.type }}">
  <p>{{ alert.message }}</p>
</div>

<!-- I decided to go the fading alert route 
     but you could esily make the alerts dismissable 
     by adding the alert-dismissable class and the dismiss button. -->

flash.js

// $rootScope is helpful so Flash can be called from any controller
app.factory('Flash', ['$rootScope', function ( $rootScope ) {

  return {

    message: function ( type, message ) {

      $rootScope.alert = 
      {
        type: type,
        message: message
      }


      // use a little jquery for affects
      // this is low cost because Bootstrap already relies on jQuery
      // another option would be to use the angular-animate module and create a custom css animation
      $('.alert').show().delay(2000).fadeOut();

    }
  }
}]);


// Then you can simply create a message like this
Flash.message('info', 'Organization successfully updated.')

// The first arguement is the Bootstrap alert style:
// info   -> class='alert-info'
// notice -> class='alert-notice'
// etc.