Использование контроллера внутри другого контроллера в AngularJS

Question

Почему я не могу привязываться к переменной контроллера внутри второго контроллера?

<div ng-app="ManagerApp"> 
    <div ng-controller="MainCtrl"> 
     Main: 
     <div ng-repeat="state in states"> 
      {{state}} 
     </div> 
     <div ng-controller="InsideCtrl as inside"> 
      Inside: 
      <div ng-repeat="state in inside.states2"> 
       {{state}} 
      </div> 
     </div> 
    </div> 
</div> 

var angularApp = angular.module('ManagerApp', []); 

angularApp.controller('MainCtrl', ['$scope', function ($scope) { 
    $scope.states = ["NY", "CA", "WA"]; 
}]); 

angularApp.controller('InsideCtrl', ['$scope', function ($scope) { 
    $scope.states2 = ["NY", "CA", "WA"]; 
}]); 

Пример: https://jsfiddle.net/nukRe/135/

вторых нг-повтора не работает.

Answer 1

Как вы используете controllerAs вы должны использовать ключевое слово this в контроллере

angularApp.controller('InsideCtrl', [ function() { 
    var vm = this; 
    vm.states2 = ["NY", "CA", "WA"]; 
}]); 

Forked Fiddle

NOTE

Технически вы должны следовать один подход за один раз. Не перепутать это два шаблона вместе, либо использовать controllerAs синтаксис/Normal декларации контроллера, как вы делали для MainCtrl используя $scope

Answer 2

Удалить

, как внутри

здесь :

<div ng-controller="InsideCtrl as inside"> , что:

`<div ng-controller="InsideCtrl">` 

Answer 3

<div ng-app="ManagerApp"> 
    <div ng-controller="MainCtrl"> 
     Main: 
     <div ng-repeat="state in states"> 
      {{state}} 
     </div> 
     <div ng-controller="InsideCtrl"> 
      Inside: 
      <div ng-repeat="state in states2"> 
       {{state}} 
      </div> 
     </div> 
    </div> 
</div>