How to create nested controllers in Angular.js ?

Last Updated : 02 Feb, 2022

A controller in AngularJS is a JavaScript object created with the help of a JavaScript object constructor. A controller can contain properties and functions. Controllers are used for controlling the application data of an AngularJS application.

In this article, we will see the nested controllers in AngularJS and will understand their implementation with the help of examples.

The approach used to create a controller in AngularJS is to create a controller we first need to create an application module. A module is used to define an application.

Syntax:

var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
    ...
});

Description:

Once a module is created we add a controller to it using the controller() method.
The first parameter inside the controller() method is the name of the controller.
The second parameter is a function that has $scope as a parameter. The $scope object is injected into each controller by the AngularJS framework.
Different properties and methods can be attached to the $scope object inside the controller function.
To use a property of a controller or maintain the data in an HTML element, you need to specify the controller in the ng-controller directive.

Example 1: This example will illustrate how to create a controller

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Example 1</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <h1>{{title}}</h1>
    </div>

    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.title = "AngularJS Controller";
        });
    </script>
</body>

</html>

Output:

Example 2: This example will illustrate the attachment of different properties to the controller

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Example 2</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
      </script>
</head>

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <h1>{{properties.name}}</h1>
        <p>{{properties.subject}}</p>

        <label>First name:</label>
        <input type="text" ng-model="firstname">
        <br><br>
        <label>Last name:</label>
        <input type="text" ng-model="lastname">
        <br><br>
        <p ng-show="firstname!=undefined && lastname!=undefined">
          Hello {{displayname()}}
          </p>

    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.properties = { 
              "name": "GeeksforGeeks", 
              "subject": "AngularJS Controllers" 
            };
            $scope.displayname = function () {
                return $scope.firstname + " " + $scope.lastname;
            };
        });
    </script>
</body>

</html>

Output:

In the above example, we have added properties to the controller "myCtrl". A controller can have different properties like string, number, object, array, function.

Nested Controllers: AngularJS allows using nested controllers. It means that you have specified a controller in an HTML element which is a child of another HTML element using another controller. An important point to note here is that a child controller can access properties and methods belonging to a parent controller, but a parent controller cannot access the properties and methods of a child controller.

Syntax:

<div ng-controller="controller">
    <div ng-controller="subcontroller">
    </div>
</div>

Example 1: This example will illustrate how to create a nested controllers

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Example 3</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
      </script>
</head>

<body ng-app="myApp">
    <div ng-controller="parentController">
        <div ng-controller="childController">
            <p>{{title}}</p>

        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("parentController", function ($scope) {
            $scope.title = "This is parent controller.";
        });
        app.controller("childController", function ($scope) {
        });
    </script>
</body>

</html>

Output:

Here you can observe that the parent controller has a property called title which is inherited by the child controller.

Example 2: If we add the same property to both the parent and child controllers

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Example 4</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
      </script>
</head>

<body ng-app="myApp">
    <div ng-controller="parentController">
        <div ng-controller="childController">
            <p>{{title}}</p>

        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("parentController", function ($scope) {
            $scope.title = "This is parent controller.";
        });
        app.controller("childController", function ($scope) {
            $scope.title = "This is child controller.";
        });
    </script>
</body>

</html>

Output:

Here you can observe that both the parent and child controller have the property named title. The property of the child controller overrides that of the parent controller.

Example 5: The below example shows how we can use nested controllers in AngularJS.