Uses CSS framework SemanticUI.

AngularJS FlashMessage

myApp = angular.module 'myApp', []

myApp.service 'FlashMessage', ($rootScope) ->
  Flash = () ->
    $rootScope.flashes = []

    $rootScope.$on '$routeChangeSuccess', () ->
      $rootScope.$broadcast 'FlashMessage:reset', $rootScope.flashes = []
      return

    this.add = (message, type) ->
      $rootScope.$broadcast 'FlashMessage:add',
        $rootScope.flashes.push
          message: message
          type: type
      return

    this.success = (message) ->
      this.add message, 'success'
      return

    this.error = (message) ->
      this.add message, 'error'
      return

    this.reset = () ->
      $rootScope.flashes = []
    return

  return new Flash
  
myApp.directive 'flashes', () ->
  template =
    ['<div ng-show="flashes.length" ng-repeat="flash in flashes" class="ui {{flash.type}} message">'
    '  <i ng-click="closeFlashes($index)" class="close icon"></i>'
    '  <div class="header">{{flash.message}}</div>'
    '</div>'].join "\n"

  config =
    restrict: 'E'
    template: template
    replace: true
    link: (scope) ->
      scope.$on 'flashes:add', (event, flashes) ->
        scope.flashes = flashes
        return

      scope.closeFlashes = (index) ->
        scope.flashes.splice index, 1
        return
      return

In template: <flashes></flashes>
In controler: FlashMessage.success('hello world')