title: Angularjs Filter data with dropdown
body: <p>I am kinda new in angularjs and javascript so please be kind, I have two dropdown items (Ionic Select) both of them holds data from a service. The issue is that I need to filter them in order to work together like: if I choose a company in the first dropdown list, only the reps inside of that company should display in the other dropdown list.</p>
  
  <p>I tried using <code>| filter: byID</code> as I followed in Angularjs documentation but I do not think it is the right way of doing this don't know. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;label class="item item-input item-select""&gt;
      &lt;div class="input-label"&gt;
        Company:
      &lt;/div&gt;
      &lt;select&gt;
        &lt;option ng-repeat="x in company"&gt;{{x.compname}}&lt;/option&gt;
        &lt;option selected&gt;Select&lt;/option&gt;      
      &lt;/select&gt;
    &lt;/label&gt;
     &lt;div class="list"&gt;
    &lt;label class="item item-input item-select"&gt;
      &lt;div class="input-label"&gt;
        Rep:
      &lt;/div&gt;
      &lt;select&gt;
         &lt;option ng-repeat="x in represent"&gt;{{x.repname}}&lt;/option&gt;
        &lt;option selected&gt;Select&lt;/option&gt;
      &lt;/select&gt;
    &lt;/label&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>/*=========================Get All Companies=========================*/
   $http.get("http://localhost:15021/Service1.svc/GetAllComp")
        .success(function(data) {
  
          var obj = data;
          var SComp = [];
  
  
      angular.forEach(obj, function(index, element) {
  
      angular.forEach(index, function(indexN, elementN) {        
  
          SComp.push({compid: indexN.CompID, compname: indexN.CompName});
  
          $scope.company = SComp;
      });    
  
      });          
              })
  /*=========================Get All Companies=========================*/
  
  /*=========================Get All Reps=========================*/
   $http.get("http://localhost:15021/Service1.svc/GetAllReps")
        .success(function(data) {
  
          var obj = data;
          var SReps = [];
  
  
      angular.forEach(obj, function(index, element) {
  
      angular.forEach(index, function(indexN, elementN) {        
  
          SReps.push({repid: indexN.RepID, repname: indexN.RepName, fkc :indexN.fk_CompID});
  
          $scope.represent = SReps;
      });    
  
      });          
              })
  /*=========================Get All Reps=========================*/
  </code></pre>