title: Submitting Select Option Value in Angular Material
body: <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form id="reg" name="reg" enctype="application/x-www-form-urlencoded" action="http://api.phphotspot.com/v-2/client-register" method="post"&gt;
      &lt;md-input-container class="md-block"&gt;
           &lt;label for="country"&gt;Country&lt;/label&gt;       
           &lt;md-select name="country"  ng-model-options="{trackBy: '$value.id'}" id="country" ng-model="signupFormData.country" placeholder="Select a Country"&gt;
              &lt;md-option ng-value="opt" ng-repeat="opt in countries"&gt;{{opt.name}}&lt;/md-option &gt;
          &lt;/md-select&gt;
      &lt;/md-input-container&gt;
      &lt;md-button ng-submit class="md-raised md-primary"&gt;Register&lt;/md-button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>&lt;script&gt;
      angular.module('signUpNewUser', ['ngMaterial'])
          .controller('signUpFormController', function($scope) {
               $scope.signupFormData = {};
               $scope.countries = [
                     {id:"AU", name:"Australia"},
                     {id:"BR", name:"Brazil"},
                     {id:"CA", name:"Canada"},
                     {id:"IT", name:"Italy"},
                     {id:"GB", name:"United Kingdom"},
                     {id:"US", name:"United States"}];
              });
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to submit the selected country when user clicks the button. For an example when the user selects the country Australia and submits, in the server side <code>$_POST['country']</code> should be equal to <em>"AU"</em>. But currently <code>$_POST['country']</code> becomes a string <em>"Object"</em> instead of <em>"AU"</em>. </p>
  
  <p>Can someone help me to fix that?</p>
  
  <hr>
  
  <p>I changed the <strong>html</strong> to,</p>
  
  <pre><code>&lt;form id="reg" name="reg" enctype="application/x-www-form-urlencoded" action="http://api.phphotspot.com/v-2/client-register" method="post"&gt;
      &lt;md-input-container class="md-block"&gt;
           &lt;label for="country"&gt;Country&lt;/label&gt;       
           &lt;md-select name="country"  ng-model-options="{trackBy: '$value'}" id="country" ng-model="signupFormData.country" placeholder="Select a Country"&gt;
              &lt;md-option ng-value="opt.id" ng-repeat="opt in countries"&gt;{{opt.name}}&lt;/md-option &gt;
          &lt;/md-select&gt;
      &lt;/md-input-container&gt;
      &lt;md-button ng-submit class="md-raised md-primary"&gt;Register&lt;/md-button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now there is a strange behavior. When I var_dump the <code>$_POST</code> value in php I get,</p>
  
  <pre><code>array (size=1)
    '_country' =&gt; string '? string:AU ?' (length=13)
  </code></pre>
  
  <p>An underscore is added to the name of the field..! Also the value is still not the expected "AU".</p>