Update ng-model from Angular service

Question

I have angular application and textarea in it:

<textarea id="log_text_area" readonly>{{logger}}</textarea>

Also i have a Logger service which must update this textarea .

angular.module('app').factory('Logger', [function(){
    var logger = {};

    //
    // Write log
    //
    logger.log = function(log_area, arguments){
        // get current date
        var date = new Date();
        // log message
        var message = '';

        // traverse object and collect log message
        for (var i = 0; i < arguments.length; i++) {
            message += arguments[i] + " ";
        }

        console.log(log_area);

        // check log area
        if (log_area != undefined){
            // log value
            var value = "[" + date + "}] " + message + "\n";
            value += log_area;
            log_area = value;
        }
    };

    // return logger
    return logger;
}]);

Now i want to update my textarea from controller:

function MyController($scope, Logger) {     
    $scope.logger = '';

    Logger.log($scope.logger, 'Logs Logs Logs');
}

But it doesn't update. How to update textarea from angular service?

Thank you.

Answer 1

Have your log function return the text only and assign the returned value to your $scope property in the controller.

$scope.logger = Logger.Log('log, log log');

Or you could call $scope.$apply(); after the log() call, but approach numero uno is cleaner.