Why does changing the message in the service not affect the displayed message in 1, 2, 3 cases?
var app = angular.module('app', []);
app.factory('Message', function() {
return {message: "why is this message not changing"};
});
app.controller('Changer', function($scope, Message) {
Message.message = "first" // (1)
$scope.changeItems = function() {
Message.message = "second" // (2)
}
});
app.controller('Listener', function($scope, Message) {
$scope.message = Message.message
Message.message = "third" // (3)
});
This is how it appears in my view:
<div ng-controller="Listener">
{{ message }}
</div>
<div ng-controller="Changer">
<button ng-click="changeItems()">change message</button>
</div>
I have also created an example on Plunker for reference http://plnkr.co/edit/BUPS6U0S7ktDEkH9dZTZ?p=preview