How to create controller inside a controller in angular js

Question

I would like to create a controller inside a controller in angular Js. But my code is not working. Please help me on this.

Controller :

app.controller('MainController',function($rootScope,$scope){
    console.log('MainController Created');
    $scope.test = "Success";

    app.controller('InnerController',function($scope){
        console.log('Inside the InnerController');
        console.log($scope.test);
    })
});

below is my html body:

<body>
    <div ng-app="myApp" ng-controller="MainController">
        Enter your Name :
        <input type="text" ng-model="name" placeholder="your name">
        <div ng-show="name">
            <h2>This is called Two way binding :: {{name}}</h2>
        </div>
        <div ng-controller="InnerController">
            <h2>{{name}}</h2>
        </div>
    </div>
</body>

you can't create nested controller like this... But you can inject one into another. — Sankar
– Sankar, Commented Jul 20, 2017 at 9:42
Could you please kindly help me with a code snippet to inject a controller in another controller @SankarRaj — Ashok Bala
– Ashok Bala, Commented Jul 20, 2017 at 10:31

Andzej Maciusovic · Accepted Answer · 2017-07-20 09:41:13Z

1

You should put your inner controller declaration outside of MainController, because they both need to be initialised before html is parsed

app.controller('MainController',function($rootScope,$scope){
    console.log('MainController Created');
    $scope.test = "Success";
});

app.controller('InnerController',function($scope){
    console.log('Inside the InnerController');
    console.log($scope.test);
});

answered Jul 20, 2017 at 9:41

Andzej Maciusovic

4,5161 gold badge32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

omer cohen · Accepted Answer · 2017-07-20 09:43:45Z

1

in html like you did main is a father controller of innercontroller but in angular it is controller with himself like that:

app.controller('MainController',function($rootScope,$scope){
    console.log('MainController Created');
    $scope.test = "Success";
});


 app.controller('InnerController',function($scope){
       console.log('Inside the InnerController');
       console.laog($scope.test);
   })

answered Jul 20, 2017 at 9:43

omer cohen

2821 gold badge5 silver badges19 bronze badges

Comments

voskhod · Accepted Answer · 2017-07-20 09:41:10Z

0

You cannot create a controller inside another controller. But you can nest DOM elements with different controllers inside each other. So you should change your controllers' declaration to this:

app.controller('MainController',function($rootScope,$scope){
    console.log('MainController Created');
    $scope.test = "Success";
});

app.controller('InnerController',function($scope){
    console.log('Inside the InnerController');
    console.log($scope.test);
});

Pay attention that test is still available in the InnerController.

answered Jul 20, 2017 at 9:41

voskhod

19412 bronze badges

Collectives™ on Stack Overflow

How to create controller inside a controller in angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related