JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="store">

    <div ng-controller="StoreController as store">
        <input type="text" ng-model="store.name" />
        <span>{{store.name}}</span> <!-- this.name -->
        <br/>
        <input type="text" ng-model="name" />
        <span>{{name}}</span> <!-- $scope.name -->
        <div ng-controller="SubController">
            <a href="" ng-click="update();">Update name</a><br/>
            SubName1: <strong>{{subName1}}</strong> <!-- sub: this.name -->
            <br />
            SubName2: <strong>{{subName2}}</strong> <!-- sub: $scope.name -->
        </div>
    </div>
    
</div>

JavaScript

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

app.controller('StoreController', function($scope) {
	this.name = 'this.name';
	$scope.name = '$scope.name'
})

app.controller('SubController', function($scope) {
	$scope.update = function() {
		$scope.subName1 = 'sub: ' + $scope.store.name;
		$scope.subName2 = 'sub: ' + $scope.name;
	}
	$scope.update();
})