angularjs - What's the best practice for binding service data to views in Angular (1.3) -

i'm new angular, have fair amount of experience in coding , having trouble getting data binding in views "right".

my approach broadly:

• keep logic out of controllers , encapsulate them in services (see this blog)
• use controlleras syntax per john papa's style guide.

the confusion i'm having not having explicit $scope object obfuscates model in mvc philosophy. there passing comment effect in blog post, didn't see real conclusion on matter.

the angular docs state model "the single point of truth" data. perhaps read (is "truth" of values between v , c?) suggests that, if you're using controlleras syntax, controller properties model -- , "single point of truth".

if that's given, and want abstract logic services, see it, can't away 1 of 2 pretty ugly alternatives keeping controller properties in sync service values:

1. expose service view. i.e. mycontroller.data = service.data. works, pretty gross, because service data exposed view, , isn't point of these thin controllers act facade view? or @ way, service has become de facto 'fat' controller, full of business logic.
2. expose elements service want view access, put $watch expressions on each of them. not ideal because
   • you add lot of boilerplate controllers
   • you add number of watch expressions in code (angular puts watch on template <-> controller link, , add controller <-> service link; each variable in )

are these ways of doing in angular 1.3? or there (more elegant) i've missed?

edit: based on answers , additional investigations, i've collected thoughts on question in plunkr. covers 3 ways (imho) not service binding , 2 ways closer 'right' approach.

services return models. controllers interact services populate view model ($scope). view interacts view model render view.

to keep data in-sync, have few options available.

option 1: introduce factory or service job track instances - caching service. controller needs instance binding view can ask service. clean - no need explicit watch expressions, or non-specific model binding.

here example. suppose want bind user object across multiple controllers.

create user service

app.factory('userservice', function() {     return {         getuserbyid: function(id) {            ...            return user;         }     } }); 

create cached user service

app.factory('cacheduserservice', function(userservice) {      var cache = [];      return {          getuserbyid: function(id) {              if (!cache[id])                  cache[id] = userservice.getuserbyid(id);                                  return cache[id];                           }      } }); 

here, leveraging singletons (which factories , services are), , relying on caching service preserve model reference. latter point essential making sure view changes in sync model changes.

use cached user service in controller requires it:

app.controller('ctrl', function($scope, cacheduserservice) {      $scope.user = cacheduserservice.getuserbyid(...); }); 

option 2: store model keep in sync, higher $scope chain (i.e. $rootscope)

app.controller('ctrl', function($scope, $rootscope, userservice) {       $rootscope.user = userservice.getuserbyid(...); }  

any child scopes able bind model higher scope chain because of prototypical scope inheritance. take care, however, when assign or overwrite models on $scope - may inadvertently break model binding. preserve reference, use angular.copy instead.