title: Fire notification toaster in any controller angularjs
body: <p>I am using this service for notifications: <a href="https://github.com/jirikavi/AngularJS-Toaster">https://github.com/jirikavi/AngularJS-Toaster</a><br>
  Is working perfectly. Already configured for that anywhere in my application I create a pop () button, clicking the trigger notification toaster.<br>
  What I need now is any controller in my application, can call triggering the notification method.<br>
  For example, within the controller ProductController, I call pop () at any time and then the notification would be triggered.<br>
  Despite any view the pop () method function within the controller does not work at all.<br>
  Is there some detail I'm not watching?</p>
  
  <p>My index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" data-ng-app="app"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;My App&lt;/title&gt;
    &lt;meta name="description" content="app, web app, responsive, responsive layout, admin, admin panel, admin dashboard, flat, flat ui, ui kit, AngularJS, ui route, charts, widgets, components" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /&gt;
    &lt;link rel="stylesheet" href="css/bootstrap.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="css/animate.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="css/font.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="css/app.css" type="text/css" /&gt;
  
    &lt;link rel="stylesheet" href="js/modules/toaster/toaster.css" type="text/css" /&gt;
  
  &lt;/head&gt;
  &lt;body ng-controller="AppCtrl"&gt;
    &lt;div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded, 'app-aside-dock':app.settings.asideDock, 'container':app.settings.container}" ui-view&gt;&lt;/div&gt;
    &lt;!-- jQuery --&gt;
    &lt;script src="js/jquery/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- Angular --&gt;
    &lt;script src="js/libs/angular/angular.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/angular/angular-cookies.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/angular/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/angular/angular-resource.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/angular/angular-ui-router.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/angular/ngStorage.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/angular/ocLazyLoad.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/angular/ui-bootstrap-tpls.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular/angular-translate.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular/ui-jq.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular/ui-load.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular/ui-validate.js"&gt;&lt;/script&gt;
    &lt;!-- App --&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;script src="js/services.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
    &lt;script src="js/controller-university.js"&gt;&lt;/script&gt;
    &lt;script src="js/filters.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives.js"&gt;&lt;/script&gt;
  
    &lt;script src="js/modules/toaster/toaster.js"&gt;&lt;/script&gt;
    &lt;!-- Lazy loading --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My view when the notification toaster is fire by click 'pop()' (it works perfectly):</p>
  
  <pre><code>&lt;div class="bg-light lter b-b wrapper-md"&gt;
    &lt;h1 class="m-n font-thin h3"&gt;Universities&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="wrapper-md"&gt;
  
    &lt;!-- toaster directive --&gt;
    &lt;toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"&gt;&lt;/toaster-container&gt;
    &lt;!-- / toaster directive --&gt;
  
        &lt;div class="col-sm-6"&gt;
          &lt;form name="formCreate" class="form-validation"  ng-submit="insert()"&gt;
            &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                &lt;span class="h4"&gt;Create&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
  
                &lt;div class="form-group pull-in clearfix"&gt;
  
                  &lt;div class="col-sm-6"&gt;
                    &lt;label&gt;Nome&lt;/label&gt;
                    &lt;input type="text" name="name" class="form-control" maxlength="40" ng-model="university.name" required &gt;
                  &lt;/div&gt;
  
                &lt;/div&gt;&lt;!--./form-group--&gt;
  
              &lt;/div&gt;
              &lt;footer class="panel-footer text-right bg-light lter"&gt;
                &lt;button type="submit" class="btn btn-success"&gt;Save&lt;/button&gt;
                &lt;button class="btn btn-success" ng-click="pop()"&gt;pop()&lt;/button&gt;
              &lt;/footer&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My controller:</p>
  
  <pre><code>'use strict';
  
  angular.module('app.controller-university', ['ngCookies'])
    .controller('UniversityCtrl', ['$stateParams', '$scope', '$window', 'University',
      function($stateParams, $scope, $window, University ) {
  
        $scope.pop();       
  
    }]);
  </code></pre>
  
  <p>The file controllers.js. Where is the AppCtrl:</p>
  
  <pre><code>'use strict';
  
  /* Controllers */
  
  angular.module('app.controllers', ['pascalprecht.translate', 'ngCookies'])
    .controller('AppCtrl', ['$rootScope', '$scope', '$translate', '$localStorage', '$window', 'toaster', 
      function(              $rootScope,   $scope,   $translate,   $localStorage,   $window,   toaster ) {
        // add 'ie' classes to html
        var isIE = !!navigator.userAgent.match(/MSIE/i);
        isIE &amp;&amp; angular.element($window.document.body).addClass('ie');
        isSmartDevice( $window ) &amp;&amp; angular.element($window.document.body).addClass('smart');
  
        $scope.toaster = {
            type: 'success',
            title: 'Title',
            text: 'Message'
        };
        $scope.pop = function(){
            toaster.pop($scope.toaster.type, $scope.toaster.title, $scope.toaster.text);
        };
  
    }])
  </code></pre>
  
  <p>This is my app.js</p>
  
  <pre><code>'use strict';
  
  
  // Declare app level module which depends on filters, and services
  var app = angular.module('app', [
      'ngAnimate',
      'ngCookies',
      'ngResource',
      'ngStorage',
      'ui.router',
      'ui.bootstrap',
      'ui.load',
      'ui.jq',
      'ui.validate',
      'oc.lazyLoad',
      'pascalprecht.translate',
      'app.filters',
      'app.services',
      'app.directives',
      'app.controllers',
      'app.controller-university',
      'UniversityService',
      'toaster',
    ])
  .run(
    [          '$rootScope', '$state', '$stateParams',
      function ($rootScope,   $state,   $stateParams) {
          $rootScope.$state = $state;
          $rootScope.$stateParams = $stateParams;        
      }
    ]
  )
  .config(
    [          '$stateProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
      function ($stateProvider,   $urlRouterProvider,   $controllerProvider,   $compileProvider,   $filterProvider,   $provide) {
  
          // lazy controller, directive and service
          app.controller = $controllerProvider.register;
          app.directive  = $compileProvider.directive;
          app.filter     = $filterProvider.register;
          app.factory    = $provide.factory;
          app.service    = $provide.service;
          app.constant   = $provide.constant;
          app.value      = $provide.value;
  
          $urlRouterProvider
              .otherwise('/app/dashboard-v1');
          $stateProvider
              .state('app', {
                  abstract: true,
                  url: '/app',
                  templateUrl: 'tpl/app.html',              
              })
  
              .state('app.dashboard-v1', {
                  url: '/dashboard-v1',
                  templateUrl: 'tpl/app_dashboard_v1.html'
              })
  
              /////////////////////////
              // University
              //////////////////////////////////////////
              .state('app.university', {
                  url: '/universidade',
                  template: '&lt;div ui-view class="fade-in-up"&gt;&lt;/div&gt;'
              })
              .state('app.university.list', {
                  url: '/listar',
                  templateUrl: 'tpl/university/list.html',
                  controller: 'UniversityCtrl',
              })
              .state('app.university.create', {
                  url: '/criar',
                  templateUrl: 'tpl/university/create.html',
                  controller: 'UniversityCtrl',            
              })
  </code></pre>