title: how to make radio button value based dropdown using AngularJS?
body: <p>I have two radio buttons, first one is male, 2nd one is female.</p>
  
  <p>If user click that male radio button I need to show some list of male names with submit button . If user click female radio button I need to show only list of female names with submit button.</p>
  
  <p>When I open this page it should show only two radio buttons based on selection only dropdown should come with submit button.</p>
  
  <p>For example user select male, in that dropdown list user selected raju, agil, gowri, when user click that submit button I need to show in console gender with selected male names.</p>
  
  <p>Someone help me out to move forward I have enclosed my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  $('#male').multiselect({
  includeSelectAllOption: true
  });
  $('#female').multiselect({
  includeSelectAllOption: true
  });
  });
  
  function MyCtrl($scope) {
      $scope.gender = [{
          name: "Male"
      }, {
          name: "Female"
      }];
      
      $scope.submit =function()
   {
   alert($('#male').val());
   alert($('#female').val());
   }
      
      
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style type='text/css'&gt;
      .multiselect-container&gt;li&gt;a&gt;label {
    padding: 4px 20px 3px 20px;
  }
   &lt;/style&gt;    
   &lt;script type='text/javascript' src='https://code.jquery.com/jquery-2.0.2.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css"&gt;
      &lt;script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js"&gt;&lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body ng-app&gt;
    &lt;div ng-controller="MyCtrl"&gt;
      &lt;p&gt;Select your Gender&lt;/p&gt;
   &lt;form data-ng-submit="submit()"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="person in gender"&gt;
              &lt;label&gt;{{person.name}}
                  &lt;input type="radio" ng-model="$parent.favoriteBeatle"
                  name="name" value="{{person.name}}" required="required"/&gt;
              &lt;/label&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
   &lt;div style="padding:20px"&gt;
  
  &lt;select id="male" multiple="multiple"&gt;
  
  &lt;option value="gowri"&gt;Gowri&lt;/option&gt;
  
  &lt;option value="agil"&gt;Agil&lt;/option&gt;
  
  &lt;option value="raju"&gt;Raju&lt;/option&gt;
  
  &lt;option value="viswanath"&gt;Viswanath&lt;/option&gt;
  
  &lt;option value="duruwan"&gt;Duruwan&lt;/option&gt;
  
  
  
  &lt;/select&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;input type="submit" id="btnget" value="Get Selected Values" /&gt;
  
  &lt;/div&gt;
  &lt;div style="padding:20px"&gt;
  
  &lt;select id="female" multiple="multiple"&gt;
  
  &lt;option value="aarani"&gt;Aarani&lt;/option&gt;
  
  &lt;option value="ajitha"&gt;Ajitha&lt;/option&gt;
  
  &lt;option value="kanul"&gt;Kanul&lt;/option&gt;
  
  
  
  
  
  &lt;/select&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;input type="submit" id="btnget" value="Get Selected Values" /&gt;
  
  &lt;/div&gt;
   &lt;/form&gt;
      
  &lt;/div&gt;
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
     &lt;script type='text/javascript' src='https://code.jquery.com/jquery-2.0.2.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css"&gt;
      &lt;script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js"&gt;&lt;/script&gt;
  
  
   &lt;style type='text/css'&gt;
      .multiselect-container&gt;li&gt;a&gt;label {
    padding: 4px 20px 3px 20px;
  }
   &lt;/style&gt;
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[
  $(function() {
  $('#male').multiselect({
  includeSelectAllOption: true
  });
  $('#female').multiselect({
  includeSelectAllOption: true
  });
  });
  &lt;/script&gt;
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[
  function MyCtrl($scope) {
      $scope.gender = [{
          name: "Male"
      }, {
          name: "Female"
      }];
  
      $scope.submit =function()
      {
      alert($('#male').val());
      alert($('#female').val());
      }
  
  
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body ng-app&gt;
    &lt;div ng-controller="MyCtrl"&gt;
      &lt;p&gt;Select your Gender&lt;/p&gt;
      &lt;form data-ng-submit="submit()"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="person in gender"&gt;
              &lt;label&gt;{{person.name}}
                  &lt;input type="radio" ng-model="$parent.favoriteBeatle"
                  name="name" value="{{person.name}}" required="required"/&gt;
              &lt;/label&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div style="padding:20px"&gt;
  
  &lt;select id="male" multiple="multiple"&gt;
  
  &lt;option value="gowri"&gt;Gowri&lt;/option&gt;
  
  &lt;option value="agil"&gt;Agil&lt;/option&gt;
  
  &lt;option value="raju"&gt;Raju&lt;/option&gt;
  
  &lt;option value="viswanath"&gt;Viswanath&lt;/option&gt;
  
  &lt;option value="duruwan"&gt;Duruwan&lt;/option&gt;
  
  
  
  &lt;/select&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;input type="submit" id="btnget" value="Get Selected Values" /&gt;
  
  &lt;/div&gt;
  &lt;div style="padding:20px"&gt;
  
  &lt;select id="female" multiple="multiple"&gt;
  
  &lt;option value="aarani"&gt;Aarani&lt;/option&gt;
  
  &lt;option value="ajitha"&gt;Ajitha&lt;/option&gt;
  
  &lt;option value="kanul"&gt;Kanul&lt;/option&gt;
  
  
  
  
  
  &lt;/select&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;input type="submit" id="btnget" value="Get Selected Values" /&gt;
  
  &lt;/div&gt;
      &lt;/form&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>