title: AngularJs, accessing parent scope from directive inside a nested ng-repeat
body: <p>That's a noob question. I'm looking for the correct way to access the parent scope inside a directive in a nested ng-repeat. This is exactly what i mean:</p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
      &lt;div ng-repeat="section in sections"&gt;
          {{section.Name}}
          &lt;div ng-repeat="item in section.Items" ng-init="parent = section"&gt;
              &lt;span class="menuItem"&gt;{{item}}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the directive:</p>
  
  <pre><code>myApp.directive('menuItem', function () {
      return {
          restrict: 'C',
          link: function (scope, element, attrs) {
              console.log(scope.$parent.section.SectionId);
          }
      }
  });
  </code></pre>
  
  <p>The directive is attached to an item in the inner ng-repeat, and i need to access a property of the parent object. The problem is that i cannot access directly to the parent properties (with scope.$parent), because ng-repeat creates a new scope, and i must append the name of the object i set in the ng-repeat (in this case scope.$parent.<strong>section</strong>.):</p>
  
  <pre><code>&lt;div ng-repeat="section in sections"&gt;
  
  console.log(scope.$parent.section.SectionId);
  </code></pre>
  
  <p>JsFiddle: <a href="http://jsfiddle.net/7Lra7Loy/2/" rel="nofollow">http://jsfiddle.net/7Lra7Loy/2/</a></p>
  
  <p>As i want the directive to be generic, so it can be used inside other ng-repeat blocks, without being forced to use the same names in the ng-repeat, the only way i found is to use an ng-init, that would be the same in all ng-repeat blocks (ng-init="parent = section"):</p>
  
  <pre><code>&lt;div ng-repeat="section in sections"&gt;
      {{section.Name}}
      &lt;div ng-repeat="item in section.Items" ng-init="parent = section"&gt;
          &lt;span class="menuItem"&gt;{{item}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  myApp.directive('menuItem', function () {
      return {
          restrict: 'C',
          link: function (scope, element, attrs) {
              console.log(scope.parent.SectionId);
          }
      }
  });
  </code></pre>
  
  <p>JsFiddle: <a href="http://jsfiddle.net/7Lra7Loy/1/" rel="nofollow">http://jsfiddle.net/7Lra7Loy/1/</a></p>
  
  <p>Is there a better way to handle this situation? Or am i just missing something? I searched a bit, but i couldn't find anything really useful.</p>