スコープ名がコントローラ内で分離されていませんか？

Question

私は私のhtmlで、次のしている、AngularJSを学んだし、$routeProviderで少しいじりました：

<div class="container"> 
    <h1>AngularJS Practice</h1> 
    <div ng-view> 

    </div> 
</div> 

私app.jsファイルの中に、私は次のように書いた：

var myApp = angular.module("myApp", ['ngRoute']); 

myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){ 
    $routeProvider 
    .when('/', { 
     templateUrl: 'pages/main.html', 
     controller: 'mainController' 
    }) 

    .when('/second', { 
     templateUrl: 'pages/second.html', 
     controller: 'mainController' 
    }) 
}]); 

myApp.controller('mainController', ['$scope', function($scope){ 
    $scope.name = "Main controller"; 
}]); 

myApp.controller('secondController', ['$scope', function($scope){ 
    $scope.name = 'Second controller'; 
}]) 

とで各テンプレート、私は単純に書いた：

second.html：

<h1>Second</h1> 

<h3>Scope name {{ name }}</h3> 

main.html：

<h1>Main</h1> 

<h3>Scope name: {{ name }}</h3> 

私は、各コントローラに異なるように$スコープオブジェクトを期待しますが、私は第2の経路（'/second'）に着いたとき何とかスコープ名は、まだ「メインコントローラ」です。私はここに何かを逃していますか

ありがとうございます。

Answer 1

あなたはcontroller: 'mainController'を両方の状態で持っています。次

変更：

.when('/second', { 
    templateUrl: 'pages/second.html', 
    controller: 'secondController' 
})