<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script  src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.js"></script>
    <script  src="//rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.js"></script>
    <script  src="//rawgithub.com/angular-translate/bower-angular-translate-loader-partial/master/angular-translate-loader-partial.js"></script>
    <script  src="//rawgithub.com/marcorinck/angular-growl/master/build/angular-growl.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//rawgithub.com/marcorinck/angular-growl/master/build/angular-growl.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="SumoApp">
    <h1>Angular Growl + Translate Demo</h1>
    
    <div growl></div>

    <br/>
    <div class="panel panel-primary" ng-controller="GrowlDemoCtrl">
      <div class="panel-heading">
          <h3 class="panel-title">{{ 'HEADLINE' | translate }}</h3>
      </div>
      <div class="panel-body">
          <p>{{ 'PARAGRAPH' | translate }}
          <span class="pull-right">
              <a ng-click="setLang('de_DE')" translate="BUTTON_LANG_DE"></a>
              <a ng-click="setLang('en_EN')" translate="BUTTON_LANG_EN"></a>
          </span>
          </p>
          <div>
            <button type="button" class="btn btn-danger"  ng-click="addErrorMessage()">Add Danger Alert</button><br/><br/>
            <button type="button" class="btn btn-warning" ng-click="addWarnMessage()">Add Warning Alert</button><br/><br/>
            <button type="button" class="btn btn-info"    ng-click="addInfoMessage()">Add Info Alert</button><br/><br/>
            <button type="button" class="btn btn-success" ng-click="addSuccessMessage()">Add Success Alert</button><br/><br/>
            <button type="button" class="btn btn-warning" ng-click="addTranslatedMessage()">Add Translated Alert</button>
          </div>
      </div>
    </div>
  </body>

</html>
// Code goes here 
angular.module('SumoApp', ['ui.bootstrap', 'pascalprecht.translate','angular-growl'])
  .config(function (growlProvider, $httpProvider,  $translateProvider, $translatePartialLoaderProvider) {
          growlProvider.globalTimeToLive(5000); 
          
          growlProvider.messagesKey("errors");
          growlProvider.messageTextKey("message");
          growlProvider.messageSeverityKey("field");
          $httpProvider.responseInterceptors.push(growlProvider.serverMessagesInterceptor);

          $translateProvider.useLoader('$translatePartialLoader', {
              urlTemplate: '{lang}.json'
          });
          $translatePartialLoaderProvider.addPart('home');
        
          $translateProvider.preferredLanguage('en_EN');
          $translateProvider.fallbackLanguage(['en_EN']);
    })
  .run(function($rootScope, growl, $translate) {

  })
  .controller('GrowlDemoCtrl', function ($scope, growl, $translate) {
    
    $scope.setLang = function (langKey) {
        $translate.use(langKey);
    };
    $scope.addTranslatedMessage = function() {
        growl.addSuccessMessage("SUCCESS_MESSAGE");
        growl.addErrorMessage("ERROR_MESSAGE");
        growl.addWarnMessage("Override global ttl setting", {ttl: 10000});
    }
    $scope.addErrorMessage = function() {
        growl.addErrorMessage("This adds a error message");
    }
    $scope.addWarnMessage = function() {
        growl.addWarnMessage("This adds a warn message");
    }  
    $scope.addInfoMessage = function() {
        growl.addInfoMessage("This adds a info message");
    } 
    $scope.addSuccessMessage = function() {
        growl.addSuccessMessage("This adds a success message");
    } 
  })

/* Styles go here */

This Plunker show how  Angular Growl Module take advantage of Angular-Translate Module
{
    "HEADLINE": "What an awesome module!",
    "PARAGRAPH": "Srsly!",
    "SUCCESS_MESSAGE": "Translated success message",
    "ERROR_MESSAGE"  : "Translated error message",
    "BUTTON_LANG_DE" : "german",
    "BUTTON_LANG_EN" : "english"
}
{
    "HEADLINE": "Was für ein großartiges Modul!",
    "PARAGRAPH": "Ernsthaft!",
    "SUCCESS_MESSAGE": "Hey! Ich wurde als text übergeben!",
    "ERROR_MESSAGE": "Ich wurde als Attribut übergeben, cool oder?",
    "BUTTON_LANG_DE": "deutsch",
    "BUTTON_LANG_EN": "englisch"
}