<body ng-app='MainApp'>
<div ng-controller='MainCtrl'>
<div>
<div>Controller1</div>
<input type='text' ng-model='text1'/>
<button type='button' ng-click='update();'>Update</button>
</div>
</div>
<div ng-controller='MainCtrl2'>
<div>
<div>Controller2</div>
<input type='text' ng-model='text2'/>
<button type='button' ng-click='update();'>Update</button>
</div>
</div>
</body>var mainMod = angular.module('MainApp', []);
mainMod.controller('MainCtrl', ['$scope','$rootScope',
function ($scope,$rootScope) {
$scope.update = function(){
$rootScope.text2 = $scope.text1;
}
}
]);
mainMod.controller('MainCtrl2', ['$scope','$rootScope',
function ($scope,$rootScope) {
$scope.update = function(){
$rootScope.text1 = $scope.text2;
}
}
]);
External CSS
This Pen doesn't use any external CSS resources.