title: Populate dropdown list based on a Radio button selection in Angular JS
body: <p>I am trying to populate a dropdown options based on a radio button selection.</p>
  
  <p>Here is my code below</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;md-radio-group ng-model="cat_type"&gt;
  
  &lt;md-radio-button  ng-repeat="category in  categories" value="{{ category }}" class="md-primary"&gt;
  {{ category.name }}&lt;/md-radio-button&gt;
  
  &lt;/md-radio-group&gt;
  
   &lt;select class="form-control" ng-model="cat_list" ng-options="type.id as type.name for type in cat_type.types"&gt;&lt;/select&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$scope.categories= [
      {
          "id": 1,
          "name": "Allowance",
          "types": [
              {
                  "id": 1,
                  "category_id": 1,
                  "name": "Overtime"
              },
              {
                  "id": 2,
                  "category_id": 1,
                  "name": "Bonuses"
              }
          ]
      },
      {
          "id": 2,
          "name": "Deduction",
          "types": [
              {
                  "id": 3,
                  "category_id": 2,
                  "name": "Loan"
              },
              {
                  "id": 4,
                  "category_id": 2,
                  "name": "surcharges"
              }
          ]
      }
       ]
  </code></pre>
  
  <p>It lists the radio buttons, but on click of any radio item, nothing happens to the  options </p>