title: Passing params from one controller to another AngularJS
body: <p>I have a controller which fetches a list of airports, this feeds a single input component which I use for Departing and then again for Arrival. The autocomplete component works great for each case. I am trying to figure out how to pass each inputs selected airports as a individual param to another controller which fetches prices from a second url. Any ideas on how to do this with one component?</p>
  
  <p>This is the controller for the initial fetch</p>
  
  <pre><code> $scope.airport_list = null;
  
   $http({
    url: 'someUrl.com',
    method: 'GET'
   })
    .then((response) =&gt; {
      $scope.airport_list = response.data.airports;
   });
  
   $scope.searchFor = function(airportName) {
    $scope.hidelist = false;
    const output = [];
    angular.forEach($scope.airport_list, function(airport) {
      if (airport.name.toLowerCase() === airportName) {
        output.push(airport);
      }
    });
    $scope.airports = output;
   };
  
   $scope.selectAirport = function(airportName) {
     $scope.airportSearch.name = airportName.name;
     $scope.state = !$scope.state;
   };
  </code></pre>
  
  <p>This is the single input component which is used multiple times.</p>
  
  <pre><code>&lt;div class="control" ng-controller="selectCtrl"&gt;
    &lt;div&gt;
      &lt;input type="text" name="airport" 
        id="airport" ng-model="airportSearch.name" /&gt;
        &lt;div class="airport-container-dropdown" ng-
          hide="!airportSearch.name"&gt;
        &lt;div class="airport-list"
          ng-repeat="airport in airport_list | filter:airportSearch"
          ng-show="!state"
          ng-click="selectAirport(airport)"&gt;
         {{ airport.name }}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is how the component is passed for use in the view</p>
  
  <pre><code>  &lt;div class="control"&gt;
      &lt;label for="from"&gt;From:&lt;/label&gt;
      &lt;selector-component id="from"&gt;&lt;/selector-component&gt;
    &lt;/div&gt;
    &lt;div class="control"&gt;
      &lt;label for="to"&gt;To:&lt;/label&gt;
      &lt;selector-component id="to"&gt;&lt;/selector-component&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This is the airport selector component, not anything really going on with it.</p>
  
  <pre><code>import template from './airport-selector.html';
  
  export const AirportSelectorComponent = {
    template
  };
  </code></pre>