No, $watch() is not the only way. When the script reaches into the scope, if the call to the server script is created on $scope or c, then it is accessible just like the other variables. In this case don't use the $watch(), just pass the data straight to the script that calls to the server.

 

For example I'll replace the $watch() with a script that calls and passes data to the server.

api.controller = function($scope){
    var c = this;
    $scope.geoLoc = {
        "lat": "",
        "long": ""
    };
    
    //pass the longitude and latitude to server
    c.doAnUpdate = function (geoLoc) {
        c.server.get({
            "action":"UPDATE",
            "geoLoc": geoLoc
        })
    }
   //a .then() can be used after teh c.server.get() if you need to bring something back to the client after the server has done. it's job
...
}

 

Now in the HTML <script> use that function

  <script>
    
    setTimeout(function(){
        var scope = angular.element('#Geo_Map_root').scope();
        let locTimer;
        const loadLocationMap = () => {
          const { LocationMap } = window.geoJsLib;
          const root = ReactDOM.createRoot(document.getElementById('Geo_Map_root'));
          const onSubmit=(location) => {
            scope.geoLoc.lat = location.latitude.toString();
            scope.geoLoc.long = location.longitude.toString();
            //New line added below
            scope.c.doAnUpdate(scope.geoLoc);
          }
          root.render(React.createElement(LocationMap, { onSubmit }, null));
        }
    },500);
    
  </script>

 

Server Script:

(function() {
  
	if(input && input.action == "UPDATE"){
		//do what is needed with your values input.geoLoc
	}
})();