<!DOCTYPE html>
<html data-ng-app="formSubmit">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS Pass JSON Map Spring MVC Controller</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script type="text/javascript">
	var app = angular.module('formSubmit', []);
	
	app.controller('FormSubmitController',[ '$scope', '$http', function($scope, $http) {
			
		$scope.list = [];
			$scope.headerText = 'AngularJS Pass JSON Map Spring MVC Controller';
			$scope.submit = function() {
				
				var formData = {
						"FullName" : $scope.FullName,
						"City" : $scope.City,
						"Zip" : $scope.Zip	
				};
				
				var response = $http.post('PostFormDataByMap', formData);
				response.success(function(data, status, headers, config) {
					$scope.list.push(data);
				});
				response.error(function(data, status, headers, config) {
					alert( "Exception details: " + JSON.stringify({data: data}));
				});
				
				//Empty list data after process
				$scope.list = [];
				
			};
		}]);
</script>
</head>
<body>
	<form data-ng-submit="submit()" data-ng-controller="FormSubmitController">
		<h3>{{headerText}}</h3>
		<p>Full Name: <input type="text" data-ng-model="FullName"></p>
		<p>City: <input type="text" data-ng-model="City"></p>
		<p>Zip: <input type="text" data-ng-model="Zip"></p>
		<input type="submit" id="submit" value="Submit" /><br>	
		
		<h4>You submitted below data through post:</h4>
		 <pre>Data ={{list}}</pre>
	</form>
</body>
</html>