javascript - Angular: イベントが 2 回処理されるのはなぜですか?

Question

メイン、プロダクト、カスタマーの 3 つのコントローラーがあります。コントローラー A は私の「マスターページ」の一部です。コントローラ B と C は場所に依存します。

コントローラのメイン:

var MainController = function ($scope, $location, $rootScope, ToolbarService) {
    $scope.addClicked = function () {
        ToolbarService.onAddButtonClick();
    };
};

app.controller({ MainController: MainController });

製品：

var ProductController = function ($scope) {

    $scope.$on('handleAddButtonClick', function () {
        alert('Add product');
    });
};
app.controller({ ProductController: ProductController });

お客様：

var CustomerController = function ($scope) {

    $scope.$on('handleAddButtonClick', function () {
        alert('Add customer');
    });
};
app.controller({ CustomerController: CustomerController});

ツールバーサービス:

app.service({
    ToolbarService: function ($rootScope) {
        return {
            onAddButtonClick: function () {
                $rootScope.$broadcast('handleAddButtonClick');
            }
        };
    }
});

私の場所が#/productsであり、addClickedメインが呼び出されると、「製品の追加」というアラートが 2 回表示されます。これがなぜなのか、誰にも手がかりがありますか？