I've encountered an issue while trying to monitor a variable that I set in my service. Despite changing the value in the controller, the watch event fails to trigger.
Below is the code snippet:
var app = angular.module("Test", []);
app.service("testService", TestService);
app.controller("testController", TestController);
function TestService()
{
var self = this;
self.Message = "1";
}
TestController.$inject =["$scope", "testService"];
function TestController($scope, testService)
{
var self = this;
self.Message = testService.Message;
$scope.Message = self.Message;
$scope.$watch("Message", onMessageChange, true)
self.click = function()
{
testService.Message = "2";
}
function onMessageChange(oldVal, newVal)
{
self.Message = newVal;
}
}
As for the HTML:
<!DOCTYPE html>
<html >
<head>
<title>Test</title>
<script src=".\angular.js"></script>
<script src=".\test.js"></script>
</head>
<body ng-app="Test">
<div ng-controller="testController as ctrl">
<button ng-click="ctrl.click()"> Click </button>
<span> Message: {{ctrl.Message}}</span>
</div>
</body>
</html>
What could be causing this malfunction? Any insights on what might be incorrect?