‫کنترلرهای تو در تو در angularJs و نحوه ارث بری متدها و property ها در آن - بخش اول

var firstControllerScope = function ($scope) {
    // Initialize the model variables
    $scope.firstName = "John";
};

var secondControllerScope = function ($scope) {
    // Initialize the model variables
    $scope.lastName = "Doe";

    // Define utility functions
    $scope.getFullName = function () {
        return $scope.firstName + " " + $scope.lastName;
    };
};

var thirdControllerScope = function ($scope) {
    // Initialize the model variables
    $scope.middleName = "Al";
    $scope.lastName = "Smith";

    // Define utility functions
    $scope.getFullName = function () {
        return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName;
    };
};

    <div ng-controller="firstControllerScope">
        <h3>First controller</h3>
        <strong>First name:</strong> {{firstName}}<br />
        <br />
        <label>first name: <input type="text" ng-model="firstName" /></label><br />
        <br />
        

        <div ng-controller="secondControllerScope">
            <h3>Second controller (inside First)</h3>
            <strong>First name (from First):</strong> {{firstName}}<br />
            <strong>Last name (new variable):</strong> {{lastName}}<br />
            <strong>Full name:</strong> {{getFullName()}}<br />
            <br />
            <label>first name: <input type="text" ng-model="firstName" /></label><br />
            <label>last name: <input type="text" ng-model="lastName" /></label><br />
            <br />
            

            <div ng-controller="thirdControllerScope">
                <h3>Third controller (inside Second and First)</h3>
                <strong>First name (from First):</strong> {{firstName}}<br />
                <strong>Middle name (new variable):</strong> {{middleName}}<br />
                <strong>Last name (from Second):</strong> {{$parent.lastName}}<br />
                <strong>Last name (redefined in Third):</strong> {{lastName}}<br />
                <strong>Full name (redefined in Third):</strong> {{getFullName()}}<br />
                <br />
                <label>first name: <input type="text" ng-model="firstName" /></label><br />
                <label>middle name: <input type="text" ng-model="middleName" /></label><br />
                <label>last name: <input type="text" ng-model="lastName" /></label>
            </div>
        </div>
    </div>