Updating Parent Scope
http://angularjs.org/
HTML
<div ng-app="myApp" id="tableForVxp" class="dataDisplay2">
<div ng-controller="ControllerZero">
<input ng-model="message">
{{message}}
<button ng-click="handleClick(message);">LOG</button>
<div ng-controller="ControllerOne">
<input ng-model="message" >
{{ob.message}}
</div>
<div ng-controller="ControllerTwo">
<input ng-model="message" >
{{message}}
</div>
</div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('ControllerZero', function($scope) {
$scope.handleClick = function(msg) {
alert("broadcasting");
$scope.$broadcast('handleBroadcast', {message: msg});
};
})
myApp.controller('ControllerOne', function($scope) {
alert("one");
$scope.$on('handleBroadcast', function(event, args) {
alert("ControllerOne");
$scope.ob.message = 'ONE: ' + args.message;
$scope.message = 'ONE: ' + args.message;
//args.message='ONE: ' + args.message;;
});
})
myApp.controller('ControllerTwo', function($scope) {
$scope.$on('handleBroadcast', function(event, args) {
$scope.message = 'TWO: ' + args.message;
});
})