Использование контроллера внутри другого контроллера в 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"];
}]);

Разветвленная скрипка

НОТА

Технически вы должны следовать одному подходу за раз. Не путайте эти два шаблона вместе, либо используйте controllerAs Синтаксис / Нормальное объявление контроллера, как вы сделали для 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>