angularjs 指令间相互调用

<div ng-app="app">
    <div ng-controller="myctl">

        <button superman strength>按钮1111</button>
        <button superman strength speed>按钮22222</button>
    </div>
</div>
<script>
    var app = angular.module("app", []);
    app.controller("myctl", function ($scope) {
        $scope.info = "";
        $scope.showinfo = function () {
            $scope.info = "loading.....";
        };
    });

    app.directive("superman", function () {
        return {
            scope: {},
            controller: function ($scope) {
                $scope.arr = [];

                this.addL = function () { $scope.arr.push("length") };
                this.addS = function () { $scope.arr.push("speed") };
            },
            link: function (scope, element, attrs) {
                element.addClass("btn btn-success");
                element.on("click", function () {
                    alert(scope.arr);
                });
            }
        }
    });
    app.directive("strength", function () {
        return {
            require:'^superman',
            link: function (scope, element, attrs, ctl) {
                ctl.addL();
            }
        }
    });
    app.directive("speed", function () {
        return {
            require: '^superman',
            link: function (scope, element, attrs, ctl) {
                ctl.addS();
            }
        }
    });

</script>