<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
BODY { font-size: 2em;}
</style>
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller='ParentController'>
<div>Parent someText: <strong>{{ someText }}</strong></div>
<button ng-click="parentChange()">Change Parent</button>
<div ng-controller='ChildController'>
<div>Child someText: <strong>{{ someText }}</strong></div>
<button ng-click="childChange()">Change Child</button>
</div>
</div>
</body>
</html>
angular.module('myApp', []);
angular.module('myApp')
.controller('ParentController', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.someText = 'Parent Text';
$scope.parentChange = function () {
$scope.someText = 'Parent Text Changed';
};
}]);
angular.module('myApp')
.controller('ChildController', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.childChange = function () {
$scope.someText = 'Child Text Changed';
};
}]);