title: Spring MVC, Angular AngularJS drop-down list - problems on persist ManyToOne
body: <p><strong>Problem:</strong> I have a Purchase Order table and Country table which primary key is a foreign key in my PO table. On the front end I have a form (angularJS) used for creation of a new PO with a bunch of fields and about 9 drop-down list fields form where user can select whatever info is required for the PO. 
  For the sake of the example I will use the Country drop-down. (All drop-downs are getting populated from the DB).</p>
  
  <p>The problem I have is with the persistence. After submitting the form, if I use the debugger and I check the Purchase Order object that is being passed to the service all my drop downs objects are null, except the other normal input fields which belong to the PO table. </p>
  
  <p>I think the problem is Angular, If I check the network tab in my chrome browser under developer tools I see the country being passed as <em>countryData:2</em>. Thing is I am new to Angular so I am bit confused at this stage on how I should handle this as data is coming from the drop-down list and how I should return the country object. Here <a href="http://tinypic.com/r/2rd9pxl/8" rel="nofollow">http://tinypic.com/r/2rd9pxl/8</a> I put a screenshot of my network tab from the browser which show the from Data that is being posted. </p>
  
  <p><strong>Populate the country drop-down list</strong></p>
  
  <pre><code>&lt;div class="control-group"&gt;
                        &lt;label class="control-label"&gt;*Country&lt;/label&gt;
                        &lt;div class="input-append"&gt;
                            &lt;div data-ng-init="getCountryDataFromServer()"&gt;
                                &lt;b&gt;Person Data:&lt;/b&gt; &lt;select id="countryData" ng-model="contact.countryData"&gt;
                                &lt;option value=""&gt;-- Select Countries --&lt;/option&gt;
                                &lt;option data-ng-repeat="country in countries" value="{{country.countryId}}"&gt;{{country.countryname}}&lt;/option&gt;
                            &lt;/select&gt;&lt;br&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="input-append"&gt;
                            &lt;label&gt;
                              &lt;span class="alert alert-error"
                                    ng-show="displayValidationError &amp;&amp; newContactForm.countryData.$error.required"&gt;
                                  &lt;spring:message code="required"/&gt;
                              &lt;/span&gt;
                            &lt;/label&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Model</strong></p>
  
  <pre><code>@Entity
  @Table(name = "PURCHASEORDER",schema = "POTOOL")
  @Audited
  public class PurchaseOrder {
  
  @Id
  @GeneratedValue
  private int id;
  
  private String tower;
  private Double revenue;
  //other properties of the PO
  
  @ManyToOne(fetch=FetchType.EAGER)
  @JoinColumn(name = "country_id")
  private Country country;
  
  //Other ManyToOne relationships
  //Getter and setters
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>@RequestMapping(method = RequestMethod.POST, produces = "application/json")
  public ResponseEntity&lt;?&gt; create(@ModelAttribute("contact") PurchaseOrder purchaseOrder,
                                  @RequestParam(required = false) String searchFor,
                                  @RequestParam(required = false, defaultValue = DEFAULT_PAGE_DISPLAYED_TO_USER) int page,
                                  Locale locale) {
      purchaseOrderServiceImpl.save(purchaseOrder);
  
      if (isSearchActivated(searchFor)) {
          return search(searchFor, page, locale, "message.create.success");
      }
  
      return createListAllResponse(page, locale, "message.create.success");
  }
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code>public void save(PurchaseOrder purchaseOrder) {
      purchaseOrderRepository.save(purchaseOrder);
  }
  </code></pre>
  
  <p><strong>Repository</strong></p>
  
  <pre><code>public interface PurchaseOrderRepository extends
          PagingAndSortingRepository&lt;PurchaseOrder, Integer&gt; {
  
  
  }
  </code></pre>