Nested Controllers in AJ

by manoj

HTML

<div ng-app="" ng-controller="CarController">
    My name is {{ name }} and I am a {{ type }}
     
    <div ng-controller="BMWController">
        My name is {{ name }} and I am a {{ type }}
 
        <div ng-controller="BMWMotorcycleController">
            My name is {{ name }} and I am a {{ type }}
 
        </div>
    </div>
</div>

CSS

div {
    margin:10px;padding:10px;
    border:1px solid #ddd;
}

JavaScript

function CarController($scope) {
 
    $scope.name = 'Car';
    $scope.type = 'Car';
 
}
 
function BMWController($scope) {
 
    $scope.name = '123213';
 
}
 
function BMWMotorcycleController($scope) {
 
   // $scope.name = '2344';
    $scope.type = 'Motorcycle';
 
}