title: Show/Hide divs depend on dropdown select in AngularJS
body: <p>I am trying to show a div depending on what is selected from the drop down list. For example, if a user selects 'Cash' from the list show Cash div or if the user select 'Check' from the list show Check div</p>
  
  <p>I have put together sample but its incomplete and needs to wire-up</p>
  
  <p><a href="http://jsfiddle.net/abuhamzah/nq1eyj1v/" rel="noreferrer">http://jsfiddle.net/abuhamzah/nq1eyj1v/</a></p>
  
  <p>Also when the user change the selection I would also like to clear the previous selection so when the user goes back to the previous selection they should not see.</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
     &lt;div class="col-xs-12"&gt;
        &lt;label class="col-xs-6 control-label"&gt;Type:&lt;/label&gt;
        &lt;div class="col-xs-6"&gt;
           &lt;select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" &gt;
              &lt;option ng-option value="Cash"&gt;Cash&lt;/option&gt;
              &lt;option ng-option value="Check"&gt;Check&lt;/option&gt;
              &lt;option ng-option value="Money Order"&gt;Money Order&lt;/option&gt; 
           &lt;/select&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-xs-12" id="cash"&gt;
        &lt;div &gt;
           &lt;label class="col-xs-6 control-label"&gt;Cash :&lt;/label&gt;
           &lt;div class="col-xs-6"&gt;
              &lt;input type="number" class="form-control"  ng-model="payment.cash"    /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-12" id="check"&gt;
        &lt;div &gt;
           &lt;label class="col-xs-6 control-label"&gt;check :&lt;/label&gt;
           &lt;div class="col-xs-6"&gt;
              &lt;input type="number" class="form-control"  ng-model="payment.check"    /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-12" id="money_order"&gt;
        &lt;div &gt;
           &lt;label class="col-xs-6 control-label"&gt;money_order :&lt;/label&gt;
           &lt;div class="col-xs-6"&gt;
              &lt;input type="number" class="form-control"  ng-model="payment.money_order"    /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>//controller:</p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  
  
  function MyCtrl($scope) {
  
    $scope.changeme = function() {
      alert('here');
    }
  }
  </code></pre>