How to correctly organize communication between the controller, the directive and the directive outside the controller?

Question

Angular

Good afternoon!
I am writing a modal window in Angular. The problem is that I don't know how to correctly pass the controller's $scope to a directive that is created dynamically using another directive.
Now I'm doing this: I pass the modal $scope directive through the service, and in the modalWindow I get $scope.$parent.attrs.scope like this. Tell me
how can I do it normally?

angular.module('App').controller('controller', controller);
function controller($scope, $http) {

    $scope.validate = function(){
        console.log('validate');
    };
}


angular.module('App').service('modalService', ModalService);
function ModalService($compile, $timeout, $rootScope, $templateRequest) {
    return function(content, option){
        $templateRequest('/popup.template.html').then(function(response){
            var newScope = $rootScope.$new(true);
            var clone;

            newScope.attrs = option || {};

            clone = $compile(response)(newScope);

            angular.element(document.body).append(clone);
        });
    }
}

angular.module('App').directive('modal', ModalDirective);
function ModalDirective(modalService) {
    return {
        scope: true,
        restrict: 'EA',
        link: function ($scope, $element, $attr) {
            $element.on('click', function (event) {
                event.preventDefault();

                modalService('content', {
                    scope: $scope,
                    title: $attr.title,
                    contentUrl: $attr.contentUrl
                });
            });

        }

    }
}

angular.module('App').directive('modalWindow', ModalWindow);
function ModalWindow($timeout, $log, $templateRequest, $compile) {
    return {
        restrict: 'E',
        scope: true,
        link: function ($scope, $element) {

            $scope.loading = false;

            // Загружаем содежимое по адресу для всплывающего окна
            if ( $scope.$parent.attrs.contentUrl ) {
                $templateRequest($scope.$parent.attrs.contentUrl).then(function(response){
                    var clone = $compile(response)($scope);
                    $element.find('.modal-body').html(clone);

                    $scope.show();

                });
            }

            // Вставляем содержимое для окна
            if ( $scope.$parent.attrs.content ) {
                var clone = $compile($scope.$parent.attrs.content)($scope);
                $element.find('.modal-body').html(clone);
                $scope.show();
            }


        },

        controller: function ($scope, $element) {

            $scope.validate = $scope.$parent.attrs.scope.validate;

            $scope.show = function () {
                $scope.visible = true;
                $scope.loading = false;
                $element.addClass('in');
            };

            $scope.hide = function () {
                $scope.loading = false;
                $scope.visible = false;

                $timeout(function () {
                    $element.remove();
                }, 3000)
            };

            $scope.startLoading = function() {
                $timeout(function() {
                    if (!$scope.visible) {
                        $scope.loading = true;
                    }
                }, 300);
            }

        }

    }
}

<div class="menu-actions-add pull-left" ng-controller="controller">
    <modal data-title="title" data-content-url="/template.html">
        modal
    </modal>
</div>

Answer 1

How to do it normally:
1. Install 1.5
1.1. One of the most important innovations in 1.5 is the introduction of components. doka angular .
2. Forget about the $scope parameter.
3. See what Angular Services are: Angular Dock
4. Read about FLUX: FLUX Facebook