Handling Java instant Ajax request/respond with Angular
I type McDonalds, the response still shows the info of Burger King. I have to refresh the browser to get the latest and correct response.


The request is being made before the previous post completes.

In your Angular, you need to chain your $http actions

function HomeCtrl($scope, $http) {
    $scope.term = "";
    $scope.location = "";
    $scope.submitSearch = function () {
        var data = {
            term: $scope.term,
            location: $scope.location
        }; //end data
        var res = $http.post('/searchRestaurant', data);

        //chain from the post
        res.then ( function() { 
            return $http.get('/restaurantResult').
        }).then ( function(result) {
            $scope.response = result.data;
            return data;
        }).catch ( function(error) {
            //log error
            throw error;
        });

        //return for further chaining
        return res;
    }
 } 


By chaining your actions, you guarantee that the previous action completes before starting the next.

Notice that the .then method returns data differently than the .success method.

Also I avoid the .success and .error methods for two reasons: They ignore return values and they are deprecated. For more information on tbe deprecation of .success and .error, see the AngularJS $http Service API Reference -- deprecation notice.

For more information on chaining see AngularJS $q Service API Reference - chaining promises.

UPDATE

To answer you questions about the differences between .then and .catch methods and the deprecated .success and .error methods. 

The $http service .then method returns a response object to its resolve callback.

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function resolveCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function catchCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });


The response object has these properties:


data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.


--- AngularJS $http Service API Reference -- general usage


  Deprecated: The $http service .success method spreads out the response object.


// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });


As I said before, avoid these method for two reasons: they ignore return values and they are deprecated.

The rule of thumb for functional programming is always return something. By ignoring return values, .success and .error break that rule. What makes promises powerful is returning and chaining.