title: Angular $parent and $parent.$parent are the same controller when using ng-repeat
body: <p>I would like to understand why when using a <code>ng-repeat</code> with a certain controller on the item of the repeat, the parent of that item and the grandfather of that item are the same controller. I was expecting the grandfather to be the parent of the parent controller, not the same controller.</p>
  
  <p>Here the code to clarify this</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="MainController"&gt;
    {{name}}
    &lt;div ng-controller="SecondController"&gt;
    {{name}}
      &lt;ul&gt;
        &lt;li ng-repeat="item in list" ng-controller="ItemController"&gt;
           {{item.name}} {{$parent.name}} {{myDad}} {{myGrandpa}}
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div ng-controller="ThirdController"&gt;
           {{name}} {{$parent.name}} {{myDad}} {{myGrandpa}}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>angular.module('app', []);
  
  
  angular.module('app')
    .controller('MainController', function($scope) {
    $scope.name = "MainController";
   })
  .controller('SecondController', function($scope) {
    $scope.name = "SecondController";
    $scope.list = [
     {'name': 'aaa'}
    ];
  })
  .controller('ItemController', function($scope) {
    $scope.name = "ItemController";
    $scope.myDad = $scope.$parent.name;
    $scope.myGrandpa = $scope.$parent.$parent.name;
  })
  .controller('ThirdController', function($scope) {
    $scope.name = "ThirdController";
    $scope.myDad = $scope.$parent.name;
    $scope.myGrandpa = $scope.$parent.$parent.name;
  });
  </code></pre>
  
  <p>Here a <a href="http://codepen.io/stilllife00/pen/RNGxjW" rel="noreferrer">CodePen</a></p>