Bind the value of a service to a controller so it updates if the service updates

Question

There are a lot of references that discuss this, but I just need someone to confirm if this is right or not. If i have a service which I want to share information with a controller, and the controller should update on changes to the service I need to return an object from the service, like:

.factory('myService', ['$http', function($http) {

    var data = {};

    var service = {
        constant: 1234,
        getData: function() {
            return data;
        },
        doCalculation: function() {
            service.constant = data.const*25;
        },
        requestData: function() {
            return $http.get('/blah')
                       .then(function( response ) {
                           data = response.data;
                       }
        }
    }

    return service;
}])

Now to pass it to a controller for use and have it update if requestData is invoked again during maybe a route resolve() I would and can't do:

.controller('myCtrl', ['myService', function(myService) {

    var self = this;

    // PART 1
    self.data = myService.constant;  // this is not bound and will not update, yes? 
    self.data1 = myService.getData(); // this is not bound and will not update, yes?
    // So, the above would be assigned or invoked only once on init of controller and 
    // would have to reset manually by assigning either a value or the result of the 
    // the function call again

    self.myService = myService; // pass entire service
    // Now, in controller functions or in the UI I can invoke the functions or access
    // values, and those results will be bound and update on changes to the service
    // since I've passed it in its entirety

    self.getData = function() {
        return self.myService.getData();
    }

    // PART 2
    self.getData = myService.getData; // would you ever do this?
    // You wouldn't have to pass the entire service if it had a bunch of different
    // parts that maybe you didn't want to be available...

}]);

PART 1
<div ng-show="myCtrl.myService.doCalculation() === someNumber">You can't see me unless doCalculation resolves to someNumber</div>

PART 2
<div ng-show="myCtrl.getData() === anotherNumber">Would this work? and would you want to do this?</div>

I just can't seem to get the concept of how sharing data between a service(s) and a controller(s) works, and when it is working and when it won't. If all you can do is say correct, wrong, wrong, oh man so wrong, that's kewl, but if you can also say and this is why, I'd be ecstatic to put this away as finally resolved so I don't keep questioning it.

Answer 1

I wouldn't go too far here..

A controller is your view's helper. You need to generate vars and functions on your scope to help your view accomplish things.

Your business model however, is something that you would like to have one reference.

What I do is create my business model on a service, so multiple entities can share it(e.g. other services, directives, controllers etc.).

When my controller kicks in, I add a pointer to the model from the service and use the same reference between them. I bind the models properties to the view.

So:

1. A controller has it's own methods(dont share the service's methods). A controllers method should be short and use a service method as a helper.

2. A controller should have a reference to the business model which is created by a service. All your ajax calls should come from the service and populate\send the model that the service is holding.

3. A controller should have basic view functions(e.g. decide which css class to apply to an element). When you submit a form, the controller function should call the service's submit which will perform you ajax call.

Example:

Html:

<div ng-app="app">
    <div ng-controller="myCtrl">
        <input type="text" ng-model="Model.propA" />
        <br/>
        <input type="text" ng-model="Model.propB" />
        <div ng-show="ShouldShowSecondDiv()">Second Div.</div>
        <br/>
        <button ng-click="SubmitForm()">Submit</button>
    </div>
</div>

JS:

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

app.controller('myCtrl', function ($scope, myService) {
    // simple controller "view method".
    $scope.ShouldShowSecondDiv = function () {
        return $scope.Model.propB > 12;
    };

    // "complex" "non-view method" -> use service.
    $scope.SubmitForm = function () {
        myService.SubmitModelToServer();
    };

    // get the ref. from the service.
    $scope.Model = myService.GetModel();
});

app.service('myService', function () {
    this.Model = {};

    // perform an ajax to get the model or whatever.
    this.GetModel = function () {
        this.Model = {
            propA: 'Im prop A',
            propB: 12
        };

        return this.Model;
    };

    // submit it to the server via $http. Check the log and you will see the binding(if you changed a value in the view).
    this.SubmitModelToServer = function () {
        console.log("ajax or whatever....submitted");
        console.log(this.Model);
    };
});

JSFIDDLE.