AngularJS : How to create a two-way data binding between two isolated controllers and a shared service?

angularjs, angularjs-controller, angularjs-scope, javascript

Solution

Fixed it. References will be lost if you are using primitives, as in your fiddle.

Check this:

Updated fiddle

app.factory("sharedScope", function($rootScope) {
    var scope = $rootScope.$new(true);
    scope.data = {text: "init text from factory"};
    return scope;
});

app.controller("first", function($scope, sharedScope) {
    $scope.data1 = sharedScope.data;
});

app.controller("second", function($scope, sharedScope) {
    $scope.data2 = sharedScope.data;
});

Problem

I am trying to create a two-way data binding between two isolated controllers and a shared service (which provides another isolated scope): ``` app.factory("sharedScope", function($rootScope) { var scope = $rootScope.$new(true); scope.data = "init text from factory"; return scope; }); app.controller("first", function($scope, sharedScope) { $scope.data1 = sharedScope.data; }); app.controller("second", function($scope, sharedScope) { $scope.data2 = sharedScope.data; }); ``` Fiddle: http://jsfiddle.net/akashivskyy/MLuJA/ When the application launches, `data1` and `data2` are correctly updated to the `init text from factory`, but later, if I change any of them, those changes are not reflected throughout those three scopes. How can I bind them? P.S. If there's a better way than returning a scope and still having access to event and observing functionalities (without basically re-writing them), let me know. :)

Original source