Angular JS - Watch on a service function

any change in the service will trigger the watch Check the console

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<br/>
<br/>
<div ng-cloak ng-app="TabsApp">
    <div class="container" ng-controller="TabManagerCtrl"> <span class="label label-info label-ext" ng-bind="sampletext"></span>

        <br/> <i>limit:20</i>

        <br/>
        <br/>
        <input type="text" ng-model="sampletext">
            <input type="button" value="submit" ng-click="serEventInfo.setLocalData(sampletext)" />
        <br/>
        <br/>
        <br/>
    </div>
    <!-- /container -->
</div>
<!-- /app -->

JavaScript

/*app.js tabs*/

var angularApp = angular.module('TabsApp', []);
angularApp.controller('TabManagerCtrl', ['$scope', 'EventInfo', function ($scope, EventInfo) {

    $scope.serEventInfo = EventInfo;
    
    $scope.$watch("serEventInfo.getLocalData()",

    function (newData, oldData, scope) {
        console.log(newData, oldData);

    });

}]);



angularApp.factory("EventInfo", [function () {
    
    var eventInfoSer = {};
    eventInfoSer.localData = {};
    
    eventInfoSer.getLocalData = function() {
        return eventInfoSer.localData;
    };

    eventInfoSer.setLocalData = function(s) {
        eventInfoSer.localData = s;
    };

    return eventInfoSer;
}]);