title: how to send selected country name from dropdown to spring mvc with angular js
body: <p>Here I have country list dropdown and I want to send selected country name and country code (which is coming from URL in JSON format) to spring controller with post URL. But in my case only countrycode is going through URL to spring controller. Can anyone help please ..  </p>
  
  <pre><code>    &lt;form data-ng-submit="submit()" data-ng-controller="MyController"&gt;
      &lt;h3&gt;{{headerText}}&lt;/h3&gt;
              {{formData}}&lt;br&gt; &lt;br&gt;
              &lt;div data-ng-init="getCountry()"&gt;
  
                  &lt;select id="countrylist"
                      style="border-radius: 10px; width: 210px; height: 40px"
                      data-ng-model="Countryselected"
                      data-ng-options="country .cntryName for country in getCountries"
                      data-ng-click="getCity()"&gt;
                      &lt;option value=""&gt;Select Country&lt;/option&gt;
  
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div&gt;
                  &lt;select style="border-radius: 10px; width: 210px; height: 40px"
                      data-ng-model="cityselect" data-ng-disabled="!Countryselected"
                      data-ng-options=" c.cityName for c in availableCities "
                      data-ng-click="getPlace()"&gt;
                      &lt;option value=""&gt;Select City&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;p&gt;{{Countryselected}}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;p&gt;{{cityselect}}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
  
                      &lt;pre&gt;Form data ={{list}}&lt;/pre&gt;
  
  &lt;input type="text" id="tags" data-ng-model="placeselected"
              data-ng-keydown="complete()" placeholder="Type place name"&gt; &lt;br&gt;
          &lt;!--         &lt;select style="border-radius: 10px; width: 210px; height: 40px" data-ng-model="placeselected"  data-ng-options=" x.answer for x in availablePlaces "&gt; --&gt;
          &lt;!--                   &lt;option value=""&gt;place&lt;/option&gt; --&gt;
          &lt;!--                 &lt;/select&gt; --&gt;
          &lt;input type="submit" value="Submit" id="submit"&gt;
  </code></pre>
  
  <p>Here is my javascript code:</p>
  
  <pre><code>var app = angular.module('myApp', []);
              app
                      .controller(
                              'MyController',
                              function($scope, $http) {
  
                              $scope.getCountry = function() {
  
                                  $http(
                                          {
                                              method : 'GET',
                                              url : 'http://localhost:8080/SpringRestCrud/newclue/country/list'
                                          }).success(
                                          function(data, status, headers,
                                                  config) {
                                              $scope.getCountries = data;
                                          }).error(
                                          function(data, status, headers,
                                                  config) {
                                              // called asynchronously if an error occurs
                                              // or server returns response with an error status.
                                          });
                              };
                              $scope.getCity = function() {
                                  $scope.availableCities = [];
  
                                  $http(
                                          {
                                              method : 'GET',
                                              url : 'http://localhost:8080/SpringRestCrud/newclue/city/list'
                                          }).success(
                                          function(data, status, headers,
                                                  config) {
                                              $scope.getCities = data;
                                          }).error(
                                          function(data, status, headers,
                                                  config) {
                                              // called asynchronously if an error occurs
                                              // or server returns response with an error status.
                                          });
                                  angular
                                          .forEach(
                                                  $scope.getCities,
                                                  function(value) {
                                                      if (value.countrycode.cntryCode == $scope.Countryselected.cntryCode) {
                                                          $scope.availableCities
                                                                  .push(value);
                                                      }
  
                                                  });
                              };
  //                              $scope.contry = angular.copy.Countryselected;
  //                              $scope.city = angular.copy.cityselect;
  
                              //   --------------------------------------------------------------------------------------------          
                              $scope.getPlace = function() {
                                  $scope.complete = function()
  
                                  {
                                      $scope.availablePlaces = [];
  
                                      $http(
                                              {
                                                  method : 'GET',
                                                  url : 'http://localhost:8080/SpringRestCrud/newclue/clue_answer/list'
                                              }).success(
                                              function(data, status, headers,
                                                      config) {
  
                                                  $scope.getPlaces = data;
                                              }).error(
                                              function(data, status, headers,
                                                      config) {
                                                  // called asynchronously if an error occurs
                                                  // or server returns response with an error status.
                                              });
  
                                      angular
                                              .forEach(
                                                      $scope.getPlaces,
                                                      function(value) {
                                                          if (value.citycode.cityCode == $scope.cityselect.cityCode) {
                                                              $scope.availablePlaces
                                                                      .push(value.answer);
                                                          }
  
                                                      });
  
                                      $("#tags").autocomplete(
  
                                      {
  
                                          source : $scope.availablePlaces
                                      });
  
                                  }
  
                              };
  
                              $scope.list = [];
                              $scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';
                              $scope.submit = function() {
  
  
                                  var formData = { 
                                          cntryName: $scope.Countryselected.cntryName,
                                           cntryCode: $scope.Countryselected.cntryCode
  
  
                                  };
  
                                  alert("Hello2---&gt;"+formData.cntryName);
                                  var response = $http
                                          .post(
                                                  'http://localhost:8080/SpringRestCrud/newclue/PostFormData',
                                                   formData);
  
                                  response.success(function(data, status,
                                          headers, config) {
                                      alert("hello3--"+data.cntryCode);
  
  
                                      $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 = [];
  
                              };
  
                          });
  </code></pre>