JS Bin Trigger toasters on events // source http://jsbin.com/lerajit

## index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="description" content="Trigger toasters on events">
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.15/toaster.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
  <script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.15/toaster.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>


<body>
  <toaster-alerts></toaster-alerts>

  <div ng-controller="notify as n">
    <div class="form-inline">
      <select class="form-control" ng-model="n.model.type" ng-options="t for t in n.types"></select>
      <input class="form-control" ng-model="n.model.title">
      <input class="form-control" ng-model="n.model.msg">
    <button class="btn btn-primary" ng-click="n.createAlert()">Create Alert</button>
    </div>
  </div>

<script id="jsbin-javascript">
var app = angular.module('myApp', ['toaster', 'ngAnimate']);

app.controller('notify', function($rootScope){
  var self = this;
  this.model = {
    type: null,
    title: 'Alert',
    msg: 'Test Message'
  };
  this.types = ['info', 'success', 'warning', 'error'];

  this.createAlert = function(){
    $rootScope.$broadcast('alertEvent', self.model.type, self.model.title, self.model.msg);
  };
});

app.controller('alertCtrl', function($scope, toaster){
  var types = ['info', 'success', 'warning', 'error'];

  $scope.$on('alertEvent', function(event, type, title, msg, timeout){
    type = (type in types) ? 'info' : type;
    timeout = (typeof timeout === 'undefined') ? 5000 : timeout;

    toaster.pop({
      type: type || 'info',
      title: title,
      body: msg,
      timeout: timeout,
      showCloseButton: true
    });
  });
});

app.directive('toasterAlerts', function(){
  return {
    restrict: 'E',
    controller: 'alertCtrl',
    template: '<toaster-container></toaster-container>'
  };
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('myApp', ['toaster', 'ngAnimate']);

app.controller('notify', function($rootScope){
  var self = this;
  this.model = {
    type: null,
    title: 'Alert',
    msg: 'Test Message'
  };
  this.types = ['info', 'success', 'warning', 'error'];

  this.createAlert = function(){
    $rootScope.$broadcast('alertEvent', self.model.type, self.model.title, self.model.msg);
  };
});

app.controller('alertCtrl', function($scope, toaster){
  var types = ['info', 'success', 'warning', 'error'];

  $scope.$on('alertEvent', function(event, type, title, msg, timeout){
    type = (type in types) ? 'info' : type;
    timeout = (typeof timeout === 'undefined') ? 5000 : timeout;

    toaster.pop({
      type: type || 'info',
      title: title,
      body: msg,
      timeout: timeout,
      showCloseButton: true
    });
  });
});

app.directive('toasterAlerts', function(){
  return {
    restrict: 'E',
    controller: 'alertCtrl',
    template: '<toaster-container></toaster-container>'
  };
});</script></body>
</html>

## jsbin.lerajit.js
var app = angular.module('myApp', ['toaster', 'ngAnimate']);

app.controller('notify', function($rootScope){
  var self = this;
  this.model = {
    type: null,
    title: 'Alert',
    msg: 'Test Message'
  };
  this.types = ['info', 'success', 'warning', 'error'];

  this.createAlert = function(){
    $rootScope.$broadcast('alertEvent', self.model.type, self.model.title, self.model.msg);
  };
});

app.controller('alertCtrl', function($scope, toaster){
  var types = ['info', 'success', 'warning', 'error'];

  $scope.$on('alertEvent', function(event, type, title, msg, timeout){
    type = (type in types) ? 'info' : type;
    timeout = (typeof timeout === 'undefined') ? 5000 : timeout;

    toaster.pop({
      type: type || 'info',
      title: title,
      body: msg,
      timeout: timeout,
      showCloseButton: true
    });
  });
});

app.directive('toasterAlerts', function(){
  return {
    restrict: 'E',
    controller: 'alertCtrl',
    template: '<toaster-container></toaster-container>'
  };
});
	<!DOCTYPE html>
	<html ng-app="myApp">
	<head>
	<meta name="description" content="Trigger toasters on events">
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.15/toaster.min.css" rel="stylesheet" />
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
	<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.15/toaster.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>



	<body>
	<toaster-alerts></toaster-alerts>

	<div ng-controller="notify as n">
	<div class="form-inline">
	<select class="form-control" ng-model="n.model.type" ng-options="t for t in n.types"></select>
	<input class="form-control" ng-model="n.model.title">
	<input class="form-control" ng-model="n.model.msg">
	<button class="btn btn-primary" ng-click="n.createAlert()">Create Alert</button>
	</div>
	</div>

	<script id="jsbin-javascript">
	var app = angular.module('myApp', ['toaster', 'ngAnimate']);

	app.controller('notify', function($rootScope){
	var self = this;
	this.model = {
	type: null,
	title: 'Alert',
	msg: 'Test Message'
	};
	this.types = ['info', 'success', 'warning', 'error'];

	this.createAlert = function(){
	$rootScope.$broadcast('alertEvent', self.model.type, self.model.title, self.model.msg);
	};
	});

	app.controller('alertCtrl', function($scope, toaster){
	var types = ['info', 'success', 'warning', 'error'];

	$scope.$on('alertEvent', function(event, type, title, msg, timeout){
	type = (type in types) ? 'info' : type;
	timeout = (typeof timeout === 'undefined') ? 5000 : timeout;

	toaster.pop({
	type: type \|\| 'info',
	title: title,
	body: msg,
	timeout: timeout,
	showCloseButton: true
	});
	});
	});

	app.directive('toasterAlerts', function(){
	return {
	restrict: 'E',
	controller: 'alertCtrl',
	template: '<toaster-container></toaster-container>'
	};
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('myApp', ['toaster', 'ngAnimate']);

	app.controller('notify', function($rootScope){
	var self = this;
	this.model = {
	type: null,
	title: 'Alert',
	msg: 'Test Message'
	};
	this.types = ['info', 'success', 'warning', 'error'];

	this.createAlert = function(){
	$rootScope.$broadcast('alertEvent', self.model.type, self.model.title, self.model.msg);
	};
	});

	app.controller('alertCtrl', function($scope, toaster){
	var types = ['info', 'success', 'warning', 'error'];

	$scope.$on('alertEvent', function(event, type, title, msg, timeout){
	type = (type in types) ? 'info' : type;
	timeout = (typeof timeout === 'undefined') ? 5000 : timeout;

	toaster.pop({
	type: type \|\| 'info',
	title: title,
	body: msg,
	timeout: timeout,
	showCloseButton: true
	});
	});
	});

	app.directive('toasterAlerts', function(){
	return {
	restrict: 'E',
	controller: 'alertCtrl',
	template: '<toaster-container></toaster-container>'
	};
	});</script></body>
	</html>