I am facing an issue with updating a view via a controller that fetches data from a service. Despite changing the data in the service, the view does not reflect these updates. I have created a simplified example from my application, which can be found here. I have experimented with various bindings (such as using `$scope.time = TimerService.value`, encapsulating it within a function, utilizing `$watch`) but without any success.
It's important to note that in my original application, the data is represented as an array of objects and it's the attributes of these objects that are modified.
-- script.js --
var mod = angular.module('mymodule', []);
mod.service('TimerService', function() {
this.value = 0;
var self = this;
setInterval(function() {
self.value += 1;
}, 2000)
});
mod.controller('TimerCtrl', ['TimerService', '$scope', function(TimerService, $scope) {
$scope.time = TimerService.value;
$scope.$watch(function() {
return TimerService.value;
}, function(newValue) {
$scope.time = newValue;
}, true);
$scope.otherValue = '12345';
}]);
angular.element(document).ready(function() {
alert('start');
angular.bootstrap(document, ['mymodule']);
});
-- index.html --
<!DOCTYPE html>
<html>
<head>
<script src="./angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="TimerCtrl">
<h1>- {{ time }}-</h1>
<h2>{{ otherValue }}</h2>
</div>
</body>
</html>