Directive to directive communication : controller empty ( ={ } )- AngularJS

Question

I'm new to angularJS and I'm trying to do some reusable code. I, of course, read the documentation and saw this tutorial.

The idea : A directive D1 to instantiate a popup A directive D2 to manage only it's content I want the D2 directive to send her errors to the D1 directive.

The problem : In the directive D2, the popupController is empty (Object {}).

Everyting works except when I try to access this controller, that's why I cut the code only on the concerned part.

My popupDirective :

app.directive('popup', function($compile){
    return {
        restrict: 'E',
        scope: {
            show: '=',
            title: "@popupTitle",
            notifier: "@notifier"
        },
        controller: 'popupController',
        replace: false,
        transclude: true,
        link: function(scope, element, attrs) {
            scope.dialogStyle = {};
            if (attrs.width)
                scope.dialogStyle.width = attrs.width;
            if (attrs.height)
                scope.dialogStyle.height = attrs.height;
            scope.hideModal = function() {
                scope.show = false;
            };
        },
        templateUrl: 'Popup.html'
    };
});

Her Controller :

app.controller('popupController', function($scope) {
    $scope.errorMessage = "";
    $scope.modalShown = false;
    $scope.toggleModal = function() {
        $scope.modalShown = !$scope.modalShown;
    };

    $scope.hideModal = function() {
        $scope.show = false;
    };

    $scope.hasNotifier = function()
    {
        return $scope.notifier;   
    };

    $scope.manageError = function(message) {
        if ($scope.hasNotifier())
        {
            $scope.resetContext();
            $scope.errorMessage = message;
            $scope.errorDomElement.slideDown(200).delay(10000).slideUp(200);
        }
    };
});

The contentDirective :

app.directive('contentDialog', function($compile) {
    return {
        restrict: 'E',
        scope: {},
        // Search for the  controller on the paren element
        require: '^popup',
        controller: 'ContentController',
        replace: true, // Replace with the template below
        link: function(scope, element, attrs, popupController) {
            ...                 
            scope.popupCtrl = popupController;
            console.log(popupController);
            popupController.manageError("salut");
            // HERE THE POPUPCONTROLLER IS EMPTY
            ...
  };
});

The content controller :

app.controller('ContentController', ['$scope', 'ContentRs', function($scope, UseCase) {
    ...
    $scope.updateContent = function()
    {
      if($scope.selectedContent.id !== -1)
      {
          var description = $scope.getSelectedContentDescription();
          ContentRs.update({
            id: $scope.selectedContent.id,
            name: $scope.selectedContent.name,
            description: description
          }, function(){
              // on sucess
               $scope.resetContext();
          }, function(){
              // on failure
               $scope.popupCtrl.manageError("Update failed.");
               // HERE THE POPUPCONTROLLER IS EMPTY
          });
      }
      else
      {
        console.log("Error");
      }
    };
}]);

Edit, I forgot the html : Main html :

<popup popup-title="Use case management" notifier="true" show='modalShown'
                                   width='330px' height='450px'>
     <content-dialog show='modalShown'></content-dialog>
</popup>

Thank you :)

Answer 1

The problem is that inside your popupController you only add the functions to the $scope, but not the controller itself. Change to the following inside your popupController:

  this.manageError = $scope.manageError = function(message) {
    if ($scope.hasNotifier())
    {
        $scope.resetContext();
        $scope.errorMessage = message;
        $scope.errorDomElement.slideDown(200).delay(10000).slideUp(200);
    }
};