title: AngularJS : Nested Directives and Scope Inheritance
body: <p><em>preamble: It seems like this question has been asked and answered before, but I cannot seem to get it working, so if my question boils down to "can you debug my code?", I apologize.</em></p>
  
  <hr>
  
  <p>I would like to write the following code:</p>
  
  <pre><code>&lt;radio-set ng-model="obj.prop" name="obj_prop"&gt;
      &lt;radio-set-button ng-value="'public'"&gt;Public&lt;/radio-set-button&gt;
      &lt;radio-set-button ng-value="'protected'"&gt;Protected&lt;/radio-set-button&gt;
      &lt;radio-set-button ng-value="'private'"&gt;Private&lt;/radio-set-button&gt;
  &lt;/radio-set&gt;
  </code></pre>
  
  <p>This renders a bunch of radio buttons and labels which need to populate whatever is passed to the <code>&lt;radio-set&gt;</code>'s ngModel.  I'm missing something scope-related.</p>
  
  <pre><code>.directive("radioSet", function () {
      return {
          restrict: 'E',
          replace: true,
          scope: {
              ngModel: '=?',
              ngChange: '&amp;',
              name: '@'
          },
          transclude: true,
          template: '&lt;div class="radio-set" ng-transclude&gt;&lt;/div&gt;',
          controller: function () {}
      };
  })
  .directive("radioSetButton", function () {
      return {
          restrict: 'E',
          replace: true,
          require: ['^radioSet', '?ngModel'],
          scope: {
              ngModel: '=?', // provided by ^radioSet?
              ngValue: '=?',
              ngChange: '&amp;', // provided by ^radioSet?
              name: '@'      // provided by ^radioSet?
          },
          transclude: true,
          link: function (scope, element, attr) {
              element.children().eq(0).attr("name", scope.name); // scope.name is null
          },
          template: '&lt;label class="radio-set-button"&gt;' +
                      '&lt;input type="radio" name="name" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()"&gt;' +
                      '&lt;div class="radio-content" ng-transclude&gt;&lt;/div&gt;' +
                    '&lt;/label&gt;'
      };
  })
  </code></pre>
  
  <p>Both the parent and child directives need their own scope definition, but it is unclear to me how to access to the <code>radioSet</code>'s scope from within <code>radioSetButton</code>.</p>
  
  <p>thanks for the help.</p>
  
  <p>fiddle: <a href="http://jsfiddle.net/pmn4/XH5K2/2/" rel="nofollow">http://jsfiddle.net/pmn4/XH5K2/2/</a></p>