JSFiddle - React, Tailwind, and code Playground

by Roshan Fernandes

HTML

<div ng-app="myApp">
    <div ng-controller="OuterCtrl">
        Name: <input type="text" ng-model="Name">
        <br>
        (Outer) Name : <strong>{{Name}}</strong>
        <br>
        (Outer) Full Name: {{FullName}}    
            <br><br><br>
        <div ng-controller="InnerCtrl">
            Suffix: <input type="text" ng-model="Suffix">
            <br>
            (Inner) Name: {{Name}}
            <br>
            (Inner) Full Name: {{FullName}}
        </div>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('OuterCtrl', function ($scope) {
    $scope.Name = "Adam";
   
});

myApp.controller('InnerCtrl', function ($scope) {
    $scope.Suffix = "Jr.";
    $scope.FullName = $scope.Name + " " + $scope.Suffix;
    $scope.$watch('Name + Suffix', function() {
       $scope.FullName = $scope.Name +' '+$scope.Suffix;
    });
});