javascript - $rootScope.$emit() と ng-show を D3 クリック イベント経由で連携させるにはどうすればよいですか?

Question

D3 svg イメージを angular ディレクティブでラップしています。ユーザーがその D3 イメージをクリックすると、コントローラーで変数を true に設定して、ng-show が別の D3 イメージを表示するようにします。

私が行ったことは.on("click")、D3 イメージに関数を追加し、その関数を使用$rootScope.$emit()してイベントを送信することです。2 番目のイメージのコントローラーでは$rootScope.$on()、イベントを取得し、ng-show の変数を true に設定する必要があります。

このアプローチは機能しません。コードをテストして、イベントが適切に発行およびキャッチされていることを確認しましたが、ng-show は 2 番目の D3 イメージを表示しません。

どうしてこれなの？

私がやろうとしていることを説明するために、小さな plunkr を作成しました。 http://plnkr.co/edit/FnqeAF9kVXxdUdOzT5to .

コントローラーのコードは次のとおりです。

function CircleCtrl($rootScope) {

    this.render = function(element, attrs) {
        var svg = d3.select(element[0]).append("svg")
            .attr("width", 200)
            .attr("height", 200);

        var circle = svg.append("circle")
            .attr("cx", 30)
            .attr("cy", 30)
            .attr("r", 20);
        circle.on("click", function(d,i) {
            var data = {val0: "zero", val1: "one"};
            $rootScope.$emit("Circle Clicked", data);
        });
    };

}

function SquareCtrl($rootScope) {
    this.showSquare = false;

    $rootScope.$on("Circle Clicked", function(event, data) {
        this.showSquare = true;
    })

    this.render = function(element, attrs) {
        var svg = d3.select(element[0]).append("svg")
            .attr("width", 200)
            .attr("height", 200);

        var rectangle = svg.append("rect")
            .attr("x", 10)
            .attr("y", 10)
            .attr("width", 50)
            .attr("height", 100);
    };

    }

    angular.module("AngularD3Example")
        .controller("CircleCtrl", ["$rootScope", CircleCtrl])
        .controller("SquareCtrl", ["$rootScope", SquareCtrl]);