Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div id="app1">
App {{0+1}}
<div ng-controller="MainCtrl">
{{hello}}
{{test}}
</div>
</div>
<div id="app2">
App {{1+1}}
<div ng-controller="MainCtrl">
{{hello}}
<input type="text" ng-model="test"/>
</div>
</div>
CSS
div {
border: dashed 1px #000;
margin-bottom: 10px;
padding: 10px;
}
JavaScript
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById('app1'), ['app1']);
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
angular.module('app1', []);
angular.module('app2', [])
angular.module('app1')
.controller('MainCtrl', function ($scope) {
$scope.hello = 'I am Controller 1';
});
angular.module('app2')
.controller('MainCtrl', function ($scope) {
$scope.hello = 'I am Controller 2';
$scope.$watch('test', function (newVal) {
var el = document.getElementById('app1');
var scopeApp1 = angular.element(el).scope();
if (!scopeApp1.$$phase) {
scopeApp1.$apply(function () {
scopeApp1.test = newVal;
});
}
});
});