Question - how does the change montitored

HTML

<script src="http://www.flocations.com/static/vendor/angularjs/1.0.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="ControllerA">
        <ul>
        <li ng-repeat="m in myArray">
            {{showSomething(m)}}<br/> 
        </li>
        </ul>
    </div>
    <div ng-controller="ControllerB">
        <input ng-model="inputX" ng-change="updateService()"/>
    </div>    
</div>

JavaScript

angular.module('myApp', [])
    .service('myService',  function ($rootScope) {
        var x=1 ;
        return {
            setInput : function(i) {
                x = i;
            },
            getX : function() {
                return x;
            }
       };
    })

function ControllerA($scope, myService) {
    $scope.myArray = [4,5,10,2,100];
    $scope.showSomething = function(m) {
        if(m <= myService.getX() ) {
            return m + " is less than " + myService.getX();
        }
        else {
            return m + " is greater than " + myService.getX();
        }
    } 
}
    
function ControllerB($scope, myService) {
    $scope.updateService = function() {
        myService.setInput($scope.inputX);
    }
}