title: Passing Java Object to AngularJS using Spring MVC Controller
body: <p>I am developing an application with <code>AngularJS</code> and <code>Spring MVC</code>. Everything is working fine but my object is going as <code>null</code> to the <code>Spring Controller</code> so it's returning <code>null</code>. I just don`t know how to make the AngularJS populates the object.</p>
  
  <p>I will post the code here.</p>
  
  <blockquote>
    <p>AngularJS</p>
  </blockquote>
  
  <pre><code>  &lt;%@taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%&gt;
  &lt;%@taglib prefix="spring" uri="http://www.springframework.org/tags"%&gt;
  &lt;%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%&gt;
  &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Settings&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/main.css"&gt;
  &lt;link rel="stylesheet" href="css/workflow.css"&gt;
  &lt;link rel="stylesheet" href="css/upload.css"&gt;
  &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt; 
  &lt;link rel="shortcut icon" href="images/logo-small.png" /&gt;
  
  &lt;/head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var app = angular.module('formSubmit', []);
  
      app.controller('FormSubmitController', function($scope, $http) {
  
              $scope.formData = {};
              $scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';
              $scope.submit = function() {
  
                  var formData = {
                          "name1" : "nome 1",
                          "name2" : "nome 2",
                          "name3" : "nome 3",
                  };
  
                  var response = $http.post('http://localhost:8080/fire-fatca-web/SubmitMock.html', formData); //passing mockForm
                  response.success(function(data, status, headers, config) {      
                      /* alert('Success!' + JSON.stringify({
                           data: $scope.formData //used formData model here 
                      }) ); */
                      $scope.mockForm = data;
                      $scope.formData.push(data);
                  });
                  response.error(function(data, status, headers, config) {
                      alert("Exception details: " + JSON.stringify({
                          data: $scope.formData //used formData model here
                      }));
                  })
  
              };
          });
  &lt;/script&gt;
  &lt;style&gt;        
  input.ng-invalid {    
      border: 2px red solid;
      }
  &lt;/style&gt;
  &lt;body data-ng-app="formSubmit"&gt;
  
      &lt;div class="container"&gt;
      &lt;div class="col-sm-8 col-sm-offset-2"&gt;
  
  
      &lt;form data-ng-submit="submit()" name="myForm" data-ng-controller="FormSubmitController"&gt;
          &lt;!-- novalidate prevents HTML5 validation since we will be validating ourselves --&gt;
          &lt;table border="1"&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;label&gt;Name Line 1:&lt;/label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" name="name1" class="form-control" data-ng-model="formData.name1" required ng-Maxlength="40"&gt;
                          &lt;p ng-show="myForm.name1.$error.required" class="help-block"&gt;Name is required.&lt;/p&gt;
                          &lt;p ng-show="myForm.name1.$error.maxlength" class="help-block"&gt;Maximum 40 characters&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;label&gt;Name Line 2:&lt;/label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" name="name2" class="form-control" data-ng-model="formData.name2" ng-Maxlength="40"&gt;
                          &lt;p ng-show="myForm.name2.$error.maxlength" class="help-block"&gt;Maximum 40 characters&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;label&gt;Name Line 3:&lt;/label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" name="name3" class="form-control" data-ng-model="formData.name3" ng-Maxlength="40"&gt;
                          &lt;p ng-show="myForm.name3.$error.maxlength" class="help-block"&gt;Maximum 40 characters&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;h4&gt;You submitted below data through post:&lt;/h4&gt;
                      &lt;pre&gt;Form data ={{formData}}&lt;/pre&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;p&gt;Response:  {{mockForm}}&lt;/p&gt;      
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;!-- SUBMIT BUTTON --&gt;
                      &lt;button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid"&gt;Submit&lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>Spring Controller</p>
  </blockquote>
  
  <pre><code>  @Controller
  public class MockController {
  
      private Logger log = LoggerFactory.getLogger(MockController.class);
  
       @RequestMapping("/mock")
          public String getSettingsPage(){
              return "mock";
          }   
  
        @RequestMapping(value = "/SubmitMock", method = RequestMethod.POST)
          public @ResponseBody String getMock(@RequestBody MockForm mockForm){ 
  
            StringBuilder reponseData = new StringBuilder();
              reponseData.append("Name1: "+ mockForm.getName1()+" ");
              reponseData.append("Name2: "+ mockForm.getName2()+" ");
              reponseData.append("Name3: "+ mockForm.getName3());
  
              log.debug(reponseData.toString());
  
              return reponseData.toString();
  
          }
  </code></pre>
  
  <p>The return is aways: <code>Name1: null, Name2: null and Name3: null</code></p>
  
  <p>I know that I need to populate my <code>mockForm</code> with my <code>formData</code>. It was suggested me to do this:</p>
  
  <pre><code>var response = $http.post('http://localhost:8080/fire-fatca-web/SubmitMock.html', {mockform: formData});
  </code></pre>
  
  <p>But when I use that piece of code above my Controller Stops responding, I don't know why, maybe Sintaxe Error, I have no idea. Any help?</p>
  
  <p>EDIT:</p>
  
  <blockquote>
    <p>MockForm.java</p>
  </blockquote>
  
  <pre><code>package com.opessoftware.beans;
  
  public class MockForm {
  
      private String name1;
      private String name2;
      private String name3;
  
      public String getName1() {
          return name1;
      }
      public void setName1(String name1) {
          this.name1 = name1;
      }
      public String getName2() {
          return name2;
      }
      public void setName2(String name2) {
          this.name2 = name2;
      }
      public String getName3() {
          return name3;
      }
      public void setName3(String name3) {
          this.name3 = name3;
      }
  
  }
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <p>Finally I solve the problem. my ng-data-model was formData.name1, formData.name2 and formData.name3. I changed for name1, name2 and name3. Problem solved. Thank you all!</p>