如何使用UI Bootstrap Alert显示来自多个控制器的单个警报

Question

我在Angular应用程序中使用UI路由器和UI Bootstrap。我想使用服务，以便我可以显示来自各种控制器的警报消息。我希望警报显示在屏幕顶部。有关如何修改以下代码以便警报显示在页面顶部并显示来自不同控制器的消息的任何建议吗？

我使用此Stack Overflow post作为模型。

HTML：

<alert ng-repeat="alert in allInfos()" type="{{alert.type}}" close="closeAlert($index)"
     ng-cloak>{{alert.msg}}</alert>

服务：

.factory('Informer', function(){

  var messages = [];
  var Informer = {};

  Informer.inform = function(msg, type) {
    messages.push({
    msg: msg,
    type: type
   });
  };

  Informer.allInfos = function() {
    return messages;
   };

  Informer.remove = function(info) {
    messages.splice(messages.indexOf(info), 1);
  };
  return Informer;
 })

控制器：

.controller('PaymentFormCtrl',
  function ($scope, $http, Informer) {

    $scope.handleStripe = function () {
     Informer.inform("There was a problem authorizing your card.", "danger");

      $scope.messages = 'problem';   
      $scope.allInfos = Informer.allInfos;
      $scope.remove = Informer.remove;

    }
  };
});

.controller('ContactFormCtrl',
  function ($scope, $http, Informer) {
 //. . . 
     Informer.inform("There is already an account with that email address", "danger");

      $scope.messages = 'problem';   
      $scope.allInfos = Informer.allInfos;
      $scope.remove = Informer.remove;

    }
  };
});

路由器：

.state('home', {
  url: '/',
   views: {
    'top': {
      templateUrl: 'views/bigHero.html'
      },
    'bottom': {
      templateUrl: 'views/home.html',
      controller: 'HomeCtrl'
    }
    }
   })

.state('payment', {
  url: '/payment',
   views: {
    'top': {
      templateUrl: 'views/customerinfo.html',
      controller: 'ContactFormCtrl'
     },
    'bottom': {
      templateUrl: 'views/creditcard.html',
      controller: 'PaymentFormCtrl'
      },
   }
  });
  });