title: Directive to directive communication : controller empty ( ={ } )- AngularJS
body: <p>I'm new to angularJS and I'm trying to do some reusable code.
  I, of course, read the documentation and saw <a href="https://egghead.io/lessons/angularjs-directive-to-directive-communication" rel="nofollow">this tutorial</a>.</p>
  
  <p>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.</p>
  
  <p>The problem :
  In the directive D2, the popupController is empty (Object {}).</p>
  
  <p>Everyting works except when I try to access this controller, that's why I cut the code only on the concerned part.</p>
  
  <p>My popupDirective :</p>
  
  <pre><code>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'
      };
  });
  </code></pre>
  
  <p>Her Controller :</p>
  
  <pre><code>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);
          }
      };
  });
  </code></pre>
  
  <p>The contentDirective :</p>
  
  <pre><code>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
              ...
    };
  });
  </code></pre>
  
  <p>The content controller :</p>
  
  <pre><code>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");
        }
      };
  }]);
  </code></pre>
  
  <p>Edit, I forgot the html :
  Main html :</p>
  
  <pre><code>&lt;popup popup-title="Use case management" notifier="true" show='modalShown'
                                     width='330px' height='450px'&gt;
       &lt;content-dialog show='modalShown'&gt;&lt;/content-dialog&gt;
  &lt;/popup&gt;
  </code></pre>
  
  <p>Thank you :)</p>