Angular service design when methods affect scope elements

Question

I have this jsfiddle, basically is two button application. When you click on the first one it's execute a method in my angular controller (load()), I was trying to create service to reuse the logic, organize more the code and practically try to follow the best practices.

First please let me know if I am right following.

1. Controller is the piece that communicate changes to the model, is the interaction between my view or presentation and the logic behind the app.

2. Service is more for create the processes run in the app, in a REST perspective this will be on charge to call the REST api's and if calculations apply this is the place in which they should reside.

My question is what I do when the callback function for a http call moves elements that are in the scope and are used to perform actions in the UI ?

It is correct to move the $scope into my service layer?, I think not is correct for several reasons.

To give a real example, what is the best approach to move the load() method logic which is in the fiddle to the loadFromService method, how I can send back the information that I need to update the UI, in this case [source] and [invalid] vars.

Based on the fiddle I want to update source variable with "service" value and invalid = true, when I call it using myService.loadFromService();

What is the correct approach to do that. Just to clarify, I want the same result if I click on the first button which execute controller method or if I click on the second button which call the service, what is the correct implementation

Update: what is the best approach if I have a series of conditions or rules before and after the REST call, I mean service method not only perform a REST call (do some logic to set input params, and do something with the response)

Answer 1

The proper way to do this is by returning a promise.

You can read more about this at this post: Processing $http response in service

So I would implement it something like this:

myApp.service('myService', [ '$http', function($http) {
    this.loadFromService = function() {
        $http.get('http://localhost:8080/person').then( function(res) {
            return res.data;
        });
    };
}]);

And in the controller you could have:

myApp.controller('myController', ['myService', function(myService) {
    $scope.load = function() {
        myService.loadFromService().then(function(data) {
            $scope.data2 = data;
        });
    };
}]);