Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl1">
{{foo}}
<select
ng-model="foo"
ng-options="foo for foo in foos"
></select>
</div>
<br/>
<div ng-controller="MyCtrl2">
{{foo}}
<select
ng-model="foo"
ng-options="foo for foo in foos"
></select>
</div>
JavaScript
var myApp = angular.module('myApp', []);
var foos = [
'foo1',
'foo2',
'foo3'
];
function MyCtrl($scope, $rootScope) {
$scope.foo = foos[0];
$scope.foos = foos;
$rootScope.$on('foo-event', function(e, data) {
$scope.foo = data;
});
$scope.$watch('foo', function() {
$rootScope.$broadcast('foo-event', $scope.foo);
});
}
myApp.controller('MyCtrl1', ['$scope', '$rootScope', MyCtrl]);
myApp.controller('MyCtrl2', ['$scope', '$rootScope', MyCtrl]);