один контроллер загружает представления с других контроллеров, как и почему?

У меня есть следующий div в моем index.html, контроллером которого является MainCtrl. Это div, используемый для загрузки представлений с разных контроллеров.

<div ng-controller="MainCtrl">
          <div ng-view></div>
      </div>

И это мои контроллеры:

.config(['$routeProvider', function($routeProvider) {

    $routeProvider.
        when('/main', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        }).
        when('/about', {
            templateUrl: 'views/about.html',
            controller: 'MainCtrl'
        }).
        when('/services', {
            templateUrl: 'views/services.html',
            controller: 'ServicesCtrl'
        }).
        when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'ContactCtrl'
        }).
        otherwise({redirectTo: '/main'})

}])

.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('data/services.json').then(function(response){
        $scope.services = response.data;
    });
}])

.controller('ServicesCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('data/services.json').then(function(response){
        $scope.services = response.data;
    });
}])

.controller('ContactCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('data/locations.json').then(function(response){
        $scope.locations = response.data;
    });
}]);

Все работает отлично, но я не понимаю, как все виды из разных контроллеров автоматически загружаются внутри <div ng-controller="MainCtrl">?

Так, например, если я иду в mysite/services, он загружает services.html, хотя его контроллер - ServiceCtrl.

Мне кажется логичным, что он должен загружать только представление из MainCtrl, которое является main.html и about.html, но все же загружает их независимо от имен контроллеров, как получилось?