Passing params from one controller to another AngularJS

Question

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?

This is the controller for the initial fetch

 $scope.airport_list = null;

 $http({
  url: 'someUrl.com',
  method: 'GET'
 })
  .then((response) => {
    $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;
 };

This is the single input component which is used multiple times.

<div class="control" ng-controller="selectCtrl">
  <div>
    <input type="text" name="airport" 
      id="airport" ng-model="airportSearch.name" />
      <div class="airport-container-dropdown" ng-
        hide="!airportSearch.name">
      <div class="airport-list"
        ng-repeat="airport in airport_list | filter:airportSearch"
        ng-show="!state"
        ng-click="selectAirport(airport)">
       {{ airport.name }}
      </div>
    </div>
  </div>
</div>

This is how the component is passed for use in the view

  <div class="control">
    <label for="from">From:</label>
    <selector-component id="from"></selector-component>
  </div>
  <div class="control">
    <label for="to">To:</label>
    <selector-component id="to"></selector-component>
  </div>

This is the airport selector component, not anything really going on with it.

import template from './airport-selector.html';

export const AirportSelectorComponent = {
  template
};

Answer 1

Since, selector-component is an AngularJS component, it is capable of accepting the attribute bindings.

You can change the registration of component like this:

angular.module( ... )
  .component('selectorComponent', {
    ...
    bindings: {
      value: '<'
    },
    ...
  });

This will automatically bind a variable value to the controller, which can be accessed in the template using $ctrl.value.

Also, the value can be passed like this:

<selector-component value="bind the value here">

Refer to the documentation for more details.

Answer 2

If selector-component is your directive then

app.directive('directiveName', function(){
   return {
      restrict:'E',
      scope: {
         title: '@'
      },
      template:'<div class="title"><h2>{{title}}</h2></div>'
   };
});

Depending on how/what you want to bind, you have different options:

= is two-way binding

@ simply reads the value (one-way binding)

& is used to bind functions

You should go for more research here