<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>Hello World AngularJS</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
	<script src="controllers.js"></script>
</head>
<body>
  
<div ng-controller="myCtrl1">
	<h3>Controller 1</h3>
	<input type="text" ng-model="model.myValue">
	{{myText()}}
</div>

<div ng-controller="myCtrl2">
	<h3>Controller 2</h3>
	<input type="text" ng-model="model.myValue">
	{{myText()}}
</div>

</body>
</html>
var app = angular.module('myApp', []);

app.service('MyService', function() {
  this.model = {
    'myValue': ''
  };
  
  this.myText = function () {
    return "Hello " + this.model.myValue + "!";
  };
});


app.controller('myCtrl1', function($scope, MyService) {
  $scope.model = MyService.model;
  $scope.myText = MyService.myText;
});

app.controller('myCtrl2', function($scope, MyService) {
  $scope.model = MyService.model;
  $scope.myText = MyService.myText;
});