title: Populate second dropdown based on first - AngularJS
body: <p>I have two <code>select</code> boxes. The first one contains report names and the second one (which should populate dynamically based on report name <code>select</code> box) contains format options. </p>
  
  <p>I want to populate format <code>select</code> box with corresponding formats when I <code>select</code> report names.</p>
  
  <p>I have defined formats for reports in an array as follows</p>
  
  <pre><code>$scope.reportOptions = [{
      "reportName": "Cash Position",
      "reportValue": "Cash Position Report",
      "formats": ["CSV", "PDF", "XLS"]
  }, {
      "reportName": "Detail Report",
      "reportValue": "Detail Report",
      "formats": ["CSV", "PDF", "XLS"]
  }, {
      "reportName": "Reconciliation Report",
      "reportValue": "Reconciliation Report",
      "formats": ["BAI", "CSV", "PDF", "QBO", "QFX", "XLS"]
  }, {
      "reportName": "Summary Report",
      "reportValue": "Summary Report",
      "formats": ["BAI", "CSV", "PDF", "XLS"]
  }, {
      "reportName": "Sweep Report",
      "reportValue": "Sweep Report",
      "formats": ["CSV", "PDF", "XLS"]
  }, {
      "reportName": 'Custom Report Name',
      "reportValue": 'CustomReport',
      "formats": ["BAI", "CSV", "PDF", "QBO", "QFX", "XLS"]
  }];
  </code></pre>
  
  <p>My filter is as follows</p>
  
  <pre><code>.filter('exportTypeFilter', function() {
      return function(input, selectedreport, scope) {
          var selectedReportFormatOptions = [];
          var output = $.grep(scope.reportOptions, function(e) {
              return e["reportValue"] == selectedreport;
          });
          selectedReportFormatOptions = output[0]["formats"];
          return selectedReportFormatOptions;
      };
  })
  </code></pre>
  
  <p>The values are not getting populated into the <code>select</code> box. What wrong am I doing?</p>
  
  <p><strong><a href="https://jsfiddle.net/Kunalh/nwn838yb/4/" rel="nofollow">FULL EXAMPLE</a></strong></p>