Shared variables do not update after http request

Question

I created a Service to share a variable with my entire application, but the value is not being updated:

• The service makes only one query on the server to return the number of pending users
• And I would like this value to be shared in several application locations, in this case I’m showing how it would be with the header, which shows a pending user counter
• After the query, the returned value is correct and I give a console.log in the variable "service.pendingUsersCount" and the value is correct, but in the view it remains the same

// MEU SERVICE
(function() {
    'use strict';

    angular
        .module('meuModulo')
        .factory('UserPendingService', UserPendingService);

    UserPendingService.$inject = [
        'UserService',
        'Restangular'
    ];
    function UserPendingService(UserService,
                                Restangular) {

    var service = {};

    service.pendingUsersCount = 2;

    _activate();

    return service;

        function _activate() {
            UserService.searchPendingUsers()
                       .then(_successFn, _errorFn);

            function _successFn(response) {
                service.pendingUsersCount = response.data.count;
                // O valor é imprimido corretamente, porém a variavel "pendingUsersCount" não é atualizada na view
                console.log(service.pendingUsersCount); 
            }

            function _errorFn(response) {

            }
        }
    }
})();


// UM DOS LOCAIS DA APLICAÇAO A ONDE ESTE SERVICE É UTILIZADO
(function () {
    'use strict';

    angular
        .module('meuModulo')
        .directive('headerNotification', headerNotification)
        .controller('HeaderNotificationController', HeaderNotificationController);

    headerNotification.$inject = [
        'APP_PATH'
    ];
    function headerNotification(APP_PATH) {
        return {
            templateUrl:      'header-notification.view.html',
            restrict:         'E',
            replace:          true,
            controller:       HeaderNotificationController,
            controllerAs:     'headerNotificationCtrl',
            bindToController: true,
        }
    }

    HeaderNotificationController.$inject = [
        'UserPendingService'
    ];
    function HeaderNotificationController(UserPendingService) {
        var vm = this;

        vm.models = {
            usersCount: UserPendingService.pendingUsersCount
        };
    }

})();

Answer 1

Most likely your error is because you are using a variable to reference your controller and so the controller is not notified of the update. To solve the Voce problem you can use the $scope of input into the function, if still do not solve Voce can force the Angular through the $apply to make a $digest on your model:

Or update your template within a call from $scope.$apply(function(){...})

Try:

function HeaderNotificationController(UserPendingService, $scope) {
    $scope.models.usersCount = UserPendingService.pendingUsersCount;
}

Or:

function HeaderNotificationController(UserPendingService, $scope) {
    $scope.$apply(function(){
         $scope.models = {
                usersCount: UserPendingService.pendingUsersCount
          };
    });
}