shuhei/app.js

## app.js
'use strict';

angular.module('sync', [])
.controller('HomeController', function(Model, sync) {
  this.toggleName = function() {
    Model.toggleName();
  };

  sync(Model, 'getName', this, 'name');
  sync(Model, 'theOther', this, 'other');
})
.service('Model', function($rootScope) {
  var self = this;

  var name = 'Shuhei';

  this.getName = function() {
    return name;
  };

  this.theOther = function() {
    return name === 'Shuhei' ? 'Iehuhs' : 'Shuhei';
  };

  this.toggleName = function() {
    name = name === 'Shuhei' ? 'Iehuhs' : 'Shuhei';
  };
})
.factory('sync', function($rootScope) {
  var scope = $rootScope.$new(true);

  function sync(src, getter, dest, destProp) {
    set();
    scope.$watch(get, set);

    function get() {
      return src[getter]();
    }

    function set() {
      dest[destProp] = src[getter]();
    }
  };

  return sync;
});

## index.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body ng-app="sync">
    <div ng-controller="HomeController as home">
      <h1>Hello, World!</h1>
      <p>My name is {{home.name}}.</p>
      <button ng-click="home.toggleName()">Rename as {{home.other}}</button>
    </div>

    <script src="./bower_components/angular/angular.js"></script>
    <script src="./js/app.js"></script>
  </body>
</html>
	'use strict';

	angular.module('sync', [])
	.controller('HomeController', function(Model, sync) {
	this.toggleName = function() {
	Model.toggleName();
	};

	sync(Model, 'getName', this, 'name');
	sync(Model, 'theOther', this, 'other');
	})
	.service('Model', function($rootScope) {
	var self = this;

	var name = 'Shuhei';

	this.getName = function() {
	return name;
	};

	this.theOther = function() {
	return name === 'Shuhei' ? 'Iehuhs' : 'Shuhei';
	};

	this.toggleName = function() {
	name = name === 'Shuhei' ? 'Iehuhs' : 'Shuhei';
	};
	})
	.factory('sync', function($rootScope) {
	var scope = $rootScope.$new(true);

	function sync(src, getter, dest, destProp) {
	set();
	scope.$watch(get, set);

	function get() {
	return src[getter]();
	}

	function set() {
	dest[destProp] = src[getter]();
	}
	};

	return sync;
	});
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body ng-app="sync">
	<div ng-controller="HomeController as home">
	<h1>Hello, World!</h1>
	<p>My name is {{home.name}}.</p>
	<button ng-click="home.toggleName()">Rename as {{home.other}}</button>
	</div>

	<script src="./bower_components/angular/angular.js"></script>
	<script src="./js/app.js"></script>
	</body>
	</html>