Service AngularJS: Provider

<!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.provider('MyService', function() {
  this.$get = function () {
    return {
      model : {
        'myValue': ''
      },
      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;
});