angularjs - ng-controller with ng-repeat, where is the magic? -

main.html

<div ng-controller="mainctrl">   <table ng-controller="recordctrl" ng-repeat="record in records">       <tr>           <th>name</th>           <td>{{ record.name }}</td>       </tr>       <tr>           <th>team</th>           <td>{{ record.team }}</td>       </tr>   </table> </div> 

app.js

var myapp = angular.module('myapp', []);  function mainctrl($scope) {     $scope.records = [         { name: 'alessandro del piero', team: 'italy' },         { name: 'rui costa', team: 'portugal' },     ]; }  function recordctrl($scope) {     // don't see here "record" property    console.log($scope);     // thought show undefined    // ($scope.$parent.record exists, not $scope.record)    console.log($scope.record); } 

here fiddle http://jsfiddle.net/hb7lu/4620/

has recordcontroller $scope "record" property or inherits parent scope? i'm quite confuse...

it's inheritance, not magic: $scope.$parent prototype of $scope:

$scope.$parent === $scope.__proto__ // true 

quoting the doc:

in angularjs, child scope prototypically inherits parent scope.

since js go prototype chain of $scope object when looking specific property not found on directly, it'll collect 1 set on $scope.$parent.