Service value not updating in AngularJS directive?

Question

Angular

I am using Angular version 1.
There is a directive:

.directive('lives', ['freelive', 'liveNum', '$timeout', function(freelive, liveNum, $interval) {
        return {
            restrict: 'AE',
            replace: true,
            freelive: freelive,
            templateUrl: 'templates/directives/lives.html',
            link: function(scope, elem, attrs) {
                scope.liveValue = liveNum.total;
                
                $interval(function() {
                    liveNum.total = liveNum.total - 1;
                    console.info('UPDATED!');
                }, 3000);
            }
        };
    }]);

This directive has scope.liveValue which contains the value from the service:

angular
        .module('starter')
        .value('liveNum', {
            minimum: 0,
            maximum: 20,
            oneTouch: 1,
            total: 20
        });

When changing the value in the directive liveNum.total = liveNum.total - 1; value in template:
<div class="live-value">{{liveValue}}</div>
does not change.
Why? Do I need to use watchers for this?

Answer 1

scope.liveValue = liveNum.total;
                
                $interval(function() {
                    scope.liveValue = scope.liveValue - 1;
                    console.info('UPDATED!');
                }, 3000);