title: Angularjs: set parent directive scope value with child directive
body: <p>I'm not sure this is the way to do this, but my goal is the following:</p>
  
  <ul>
  <li>I have a parent directive</li>
  <li>Inside the parent directive's block, I have a child directive that will get some input from the user</li>
  <li>The child directive will set a value in the parent directive's scope</li>
  <li>I can take it from there</li>
  </ul>
  
  <p>Of course the problem is that the parent and child directives are siblings. So I don't know how to do this. Note - I do not want to set data in the </p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/rrosen326/CZWS4/">http://jsfiddle.net/rrosen326/CZWS4/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div ng-controller="parentController"&gt;
      &lt;parent-dir dir-data="display this data"&gt;
          &lt;child-dir&gt;&lt;/child-dir&gt;
      &lt;/parent-dir&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var testapp = angular.module('testapp', []);
  
  testapp.controller('parentController', ['$scope', '$window', function ($scope, $window) {
      console.log('parentController scope id = ', $scope.$id);
      $scope.ctrl_data = "irrelevant ctrl data";
  }]);
  
  testapp.directive('parentDir', function factory() {
      return {
          restrict: 'ECA',
          scope: {
              ctrl_data: '@'
          },
          template: '&lt;div&gt;&lt;b&gt;parentDir scope.dirData:&lt;/b&gt; {{dirData}} &lt;div class="offset1" ng-transclude&gt;&lt;/div&gt; &lt;/div&gt;',
          replace: false,
          transclude: true,
          link: function (scope, element, attrs) {
              scope.dirData = attrs.dirData;
              console.log("parent_dir scope: ", scope.$id);
          }
      };
  });
  
  testapp.directive('childDir', function factory() {
      return {
          restrict: 'ECA',
          template: '&lt;h4&gt;Begin child directive&lt;/h4&gt;&lt;input type="text"  ng-model="dirData" /&gt;&lt;/br&gt;&lt;div&gt;&lt;b&gt;childDir scope.dirData:&lt;/b&gt; {{dirData}}&lt;/div&gt;',
          replace: false,
          transclude: false,
          link: function (scope, element, attrs) {
              console.log("child_dir scope: ", scope.$id);
              scope.dirData = "No, THIS data!"; // default text
          }
      };
  });
  </code></pre>