binding - Using controller inside another controller in AngularJS -

why can't bind controller's variable inside second controller?

<div ng-app="managerapp">     <div ng-controller="mainctrl">         main:          <div ng-repeat="state in states">             {{state}}         </div>         <div ng-controller="insidectrl 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"]; }]); 

example: https://jsfiddle.net/nukre/135/

second ng-repeat doesn't work.

as using controlleras should using this keyword in controller

angularapp.controller('insidectrl', [ function() {     var vm = this;     vm.states2 = ["ny", "ca", "wa"]; }]); 

forked fiddle

note

technically should follow 1 approach @ time. don't mix 2 pattern together, either use controlleras syntax/ normal controller declaration did mainctrl using $scope