title: Select first value from select box by default - AngularJS
body: <p>I have two select boxes. The second select box populates from first select box.</p>
  
  <p>I have applied a filter for the second select box to populate as per the options selected in first select box. The second select box populates from an array <code>var outputformats = [];</code></p>
  
  <p>This is my code</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;select name="reporttype"id="reporttype" 
          ng-init="reporttype='1115'" 
          ng-model="reporttype"&gt;
      &lt;option value="1115"&gt;Previous Day Composite Report&lt;/option&gt;
      &lt;option value="1114"&gt;ACH Receive&lt;/option&gt;
  &lt;/select&gt;
  
  
  &lt;select name="outputformat" id="outputformat" 
          ng-model="outputformat" 
          ng-options="format for format in outputformats | outputformatfilter: reporttype:this"&gt;      
  &lt;/select&gt; Value : {{outputformat}}
  </code></pre>
  
  <p>Filter</p>
  
  <pre><code>angular.module('myApp.outputformatfilter',[])
      .filter('outputformatfilter', function () {
          return function (input,selectedreport,scope) {
  
              var outputFormatReport  = {"1115":"HTML,PDF","1114":"CSV,EXCEL"};
              var outputformats = outputFormatReport[selectedreport].split(',');
  
              return outputformats;
          };
      });
  </code></pre>
  
  <p>Now what I want is whenever the options in second select box changes, <strong>its first option should be selected by default</strong>, that is the first option from the array should be selected by default.</p>
  
  <p><strong>UPDATE</strong>: </p>
  
  <p>Updated fiddle, added <code>ng-if= reporttype !== ''</code> to second select box</p>
  
  <p><strong><a href="https://jsfiddle.net/Kunalh/bt99eg1o/7/" rel="nofollow">FIDDLE</a></strong></p>