How to add toaster in Angular JS

Index page:

 Open Home main (Container page) page  and add following references.
Remember, If you will add following lines in any of angular view, it will not work.

Reference:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.css" rel="stylesheet" />

<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js"></script>




Add Toaster Tag


<toaster-container></toaster-container>




Main Angular App

var MyApplication = angular.module('myApp', ['toaster', 'ngAnimate']);






Service or controller using Toaster
(function (ng, app) {
 
    "use strict";
 
    
    app.service("LoginService",function (toaster) {
 
      this.Login = function (username, password) {
              toaster.pop('error', "title", "texasdfasfas asdf asdf t");
          }
 
          
      }// end of service function
  
 ); // end of service
 
})(angular, MyApplication);


Other toaster examples mentioned at Plunker are,

toaster.success({title: "title", body:"text1"});
        toaster.error("title", "text2");
        toaster.pop({type: 'wait', title: "title", body:"text"});
        toaster.pop('success', "title", '<ul><li>Render html</li></ul>', 5000, 'trustedHtml');
        toaster.pop('error', "title", '<ul><li>Render html</li></ul>', null, 'trustedHtml');
        toaster.pop('wait', "title", null, null, 'template');
        toaster.pop('warning', "title", "myTemplate.html", null, 'template');
        toaster.pop('note', "title", "text");
        toaster.pop('success', "title", 'Its address is https://google.com.', 5000, 'trustedHtml', function(toaster) {
            var match = toaster.body.match(/http[s]?:\/\/[^\s]+/);
            if (match) $window.open(match[0]);
            return true;
        });
        toaster.pop('warning', "Hi ", "{template: 'myTemplateWithData.html', data: 'MyData'}", 15000, 'templateWithData');