Доступ к области действия из другой директивы

Код HTML:

<my-button> <my-button> <!-- First directive, contains a button -->

    <modal-data> <!-- Modal from bootstrap. It only show when my-button is clicked -->
       <!--This is a part of the template, rendered with the directive
      <div id="my-modal">
         {{ comments }} !!!!THIS IS NOT RENDERED!!!
      </div>
                -->
   </modal-data> 

Моя первая директива

.directive('myButton', function(){
        return {
            restrict : 'E',
            templateUrl : 'button.html',
            controller : ['$scope', 'apiService', function($scope, apiService){

                this.getComments  = function(){
                    apiService.getComments()
                        .success(function(data){
                            $scope.comments = data;
                        });
                }

            }],
            link : function(scope, element, attrs, ctrl){
                element.on('click', function(){
                    ctrl.getComments();
                    $('#my-modal').modal();
                });
            }
        };
    })

Модальная директива: она содержит только шаблон

.directive('modalComments', function(){
    return {
        restrict : 'E',
        templateUrl : 'modal.html'
    };
});

При my-button вызывается прослушиватель кликов в функции ссылки.
Это выполняет функцию в контроллере, которая является службой, которая берет данные из API.
выход должен быть связан с модальным, который будет всплывать.

Проблема в том, что я могу получить доступ только к этой области действия в директиве my-button.

Может кто-нибудь сказать мне способ решить это?

РЕДАКТИРОВАТЬ

Snippet:

(function(){
      
  angular.module('app', [])

  .controller('controller', function($scope){
    $scope.data = "Hello";

  })

  .directive('myButton', function(){
    return {
      restrict : 'E',
      template : 'Click me',
      controller : ['$scope', function($scope){
        this.getData = function(){
          $scope.data = "HEllo world";
        };
      }],
      link : function(scope, element, attrs, ctrl){

        element.on('click', function(){
          ctrl.getData();

        });

      }

    };
  });

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


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

  <my-button> {{ data }}</my-button>
  {{data}}

</div>