AngularJS Example:
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
<div ng-controller="myctrl">
OLD:<br/>
{{ CurrentDetails }}
<hr/>
NEW:<br/>
{{ NewCurrentDetails }}
</div>
</div>
JavaScript
var app = angular.module('app',[]);
app.controller('myctrl',function($scope,SharedService) {
$scope.CurrentDetails = [];
$scope.NewCurrentDetails = [];
var init = function () {
var data = {
OptionsType: "LanguageOptions",
OptionItems: [{
"OptionId": 1,
"OptionName": "English"
}],
Breadcrumbs: ["Home"]
}
$scope.ShowResponse(data);
}
$scope.ShowResponse = function (data) {
$scope.CurrentDetails = data;
}
$scope.$watch('CurrentDetails', function (newVal,oldVal) {
$scope.NewCurrentDetails = newVal;
SharedService.updateCurrentDetails(newVal);
}, true);
$scope.$on('valuesUpdated', function () {
$scope.CurrentDetails = SharedService.CurrentDetails;
});
init();
});
app.service('SharedService',function($rootScope) {
var service = {};
service.CurrentDetails = [];
service.updateCurrentDetails = function (value) {
this.CurrentDetails = value;
$rootScope.$broadcast("valuesUpdated");
}
return service;
});