How to properly bind directives and services in angular.js ?

Question

Angular

Good time.
Help with angular.
I don't understand how to implement the following.
There is a directive that outputs progress: 80/100 . The 80\100 data is taken from the service that receives the data via $resource.
At one point, the data in the service is updated (progress becomes 90\100 ). How can I make the directive update when the data in the service is updated?
If possible, with a code example.

Answer 1

Alternatively, you can put watch on the service variable.

app.factory('YouService', function() {
    var progress = 90;

    getProgress: function() {
        return progress;
    }
});

app.directive('YouDirective', function(YouService) {
    return {
        restrict: 'E',
        ...
        ...
        link: function(scope, element, attrs) {
            scope.$watch(function () {
                return YouService.getProgress();
            }, function (progress) {
                console.log(progress);
            }
        });
    }
});