How do $scope and this techniques differ in terms of sharing data via services?

Question

If you're going to create new code, please don't change the original jsbins

I am writing an app in angular 1. Right now I need to create a service I can inject in multiple controllers. I also need the data to be changeable in the various controllers but reflect the changes across the controllers. So I guess what I want are global values that have 2 way binding. I have been using a "var vm = this" technique instead of using $scope. I've read that they are essentially the same aside from syntax. But I have two examples with the same goal in mind creating different results.

They both share this service:

var app = angular.module('myApp', []);

app.service('sharedProperties', function() {
    var stringValue = 'test string value';
    var objectValue = {
        data: 'test object value'
    };

    return {
        getString: function() {
            return stringValue;
        },
        setString: function(value) {
            stringValue = value;
        },
        getObject: function() {
            return objectValue;
        }
    }
});

I have set up two jsbin's to display their functionality.

Here's the "this" example: http://jsbin.com/conidesuni/edit?html,js,output

Here's the $scope example: http://jsbin.com/gobodutaje/edit?html,js,output

There are two sources of inputs, one binded to the objectValue and another binded to both the objectValue and stringValue. In the input that sets both values, the service's set function is called.

The difference is that $scope seems to bind across the two binded divs in controller two, but the "this" example isn't doing that. The this example is not changing any values when attempting to change both values at the same time (stringValue and objectValue). It prints undefined in the console.

Neither techniques cause the input in controller2 to change the divs in controller1 despite them sharing a service.

I want to know how I can make these binds two ways across the controllers and what exactly is the difference between what is happening with the "this" example and $scope example.

Answer 1

Basically $scope and this are the same thing as you stated at your question.

When you retrieve ControllerAs(myController2 as cont2) in your template, everything(variables and functions) you want to access from template to controller must have a prefix of cont2.

And in your first jsbin, you have missed one prefix cont2 at calling cont2.setString(newValue) and it should be cont2.setString(cont2.newValue). else you can't pass what you have typed at the textbox.

---

UPD:

Normally if value lept at sharedService changed, we have to manually call service functions to get the newValue as answered by @Sumit Deshpande.

There is still another way that you can bind the same object instance to controller's varaible with the object instance kept in sharedService, but keep in mind that this way don't support filed of string type(unless you put the string filed in object filed too).

refer the below plunker.