Data passing from one component to another component in angular.js (not in angular)

Question

Here I have made a controller Product.js where i have tried to pass the data from Manual PrescrsiptionLeft.tpl.liquid to ManualPrescriptionRight.tpl.liquid. But whenever i have tried to pass the data it become irresponsive also i am not able to find the $ctrl.addName. Is there any way so that i can pass the data from one component to another( here components are dialog box) in Angular.js not in angular.

Product.js

var storefrontApp = angular.module("storefrontApp");

storefrontApp.component("vcManualDataLeft", {
    // selector: 'vc-manual-data-left',
    templateUrl:
    "themes/assets/js/dialog-box/manualPrescriptionLeft.tpl.liquid",
        
    bindings: {
        addName: "@"
    },
    controller: [function () {
        // var manualleft = {}
        var $ctrl = this;

        $ctrl.addAName = function () {
            $ctrl.addName({name: $ctrl.newName});
            

            $ctrl.newName=" ";
        };

    }],
    
});

storefrontApp.component("vcManualDataRight", {
    templateUrl:
        "themes/assets/js/dialog-box/manualPrescriptionRight.tpl.liquid",
    bindings: {
        username:"&",
    },
    controller: [function () {
        // var manualright = {}
        var $ctrl = this;
        $ctrl.addName = function (name) {
            $ctrl.username = name;
            // $ctrl.names.push(name);
          };
    }],
});



storefrontApp.component("vcContactLeftCart", {
    templateUrl:
        "themes/assets/js/dialog-box/recentlyAddedCartItemLeft.tpl.liquid",
    bindings: {
        cartleft: "@",
    },
    controller: [
        function () {
            var cartleft ={};
            var $ctrl = this;
        },
    ],
});

ManualPrescriptionLeft.tpl.liquid (First Component)

    <div class="mp-atc-item-img" style="display: grid">
        <h4 style="text-align: center">{{ "cart.general.left_eye" | t }}</h4>
    </div>
    <div class="mp-atc-item-desc-cart" style="display: inline-grid">
        <p>{{ "cart.general.color" | t }}</p>
        <select id="leftColor" name="Green1" style="margin-right: 122px">
            <option value="Green">Green</option>
            <option value="Green">Green</option>
            <option value="Green">Green</option>
            <option value="Green">Green</option>
        </select>
    </div>
    <div class="mp-atc-item-desc-cart" style="display: inline-grid">
        <p style="Text">{{ "cart.general.power_sphere" | t }}</p>
        <input type="text" id="leftpower" ng-model="$ctrl.newName.leftpower" />
    </div>
    <div class="mp-atc-item-desc-cart" style="display: inline-grid">
        <p style="Text">{{ "cart.general.bc" | t }}</p>
        <input type="text" id="leftbc" ng-model="user.leftbc" />
    </div>
    <div class="mp-atc-item-desc-cart" style="display: inline-grid">
        <p style="Text">{{ "cart.general.dia" | t }}</p>
        <input type="text" id="leftdia" ng-model="user.leftdia" />
    </div>
    <p><button ng-click="$ctrl.addAName()">Add Name</button></p>
</div>

<style>
    .mp-atc-conf-cart {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }

    .mp-atc-item-desc-cart {
        display: grid;
        grid-template-columns: 6rem 1fr 6.625rem;
        gap: 1rem;
        align-items: center;
        padding: 0.5rem 0;
    }

    .mp-atc-item-desc-cart {
        display: grid;
        grid-template-columns: 6rem 1fr 6.625rem;
        gap: 1rem;
        align-items: center;
        padding: 0.5rem 0;
    }
</style>

ManualPrescriptionRight.tpl.liquid (Second Component)

    <div class="mp-atc-item-img" style="display: grid;">
        <h4 style="text-align: center;">{{'cart.general.right_eye' | t}}</h4>
    </div>
    <div class="mp-atc-item-desc-cart" style="display: inline-grid;">
        <p style="Text">{{'cart.general.color' | t}} </p>
        <select id="rightColor" name="Green" style="margin-right: 122px;">
            <option value="Green">Green</option>
            <option value="Green">Green</option>
            <option value="Green">Green</option>
            <option value="Green">Green   </option>
        </select>
    </div>
    <p>username: {{$ctrl.username}}</p>
    <div class="mp-atc-item-desc-cart" style="display: inline-grid;">
        <p style="Text">{{'cart.general.power_sphere' | t}} </p>
        <div ng-if="myCheck">
            <input type="text" id="rightpower" ng-model="user.leftpower"  disabled>
        </div>
        <div ng-if="!myCheck">
            <input type="text" id="rightpower" >
        </div>
    </div>
    <div class="mp-atc-item-desc-cart" style="display: inline-grid;">
        <p style="Text">{{'cart.general.bc' | t}} </p>
        <div ng-if="myCheck">
            <input type="text" id="rigthbc" ng-model="user.leftbc" disabled>
        </div>
        <div ng-if="!myCheck">
            <input type="text" id="rigthbc" >
        </div>
    </div>
    <div class="mp-atc-item-desc-cart" style="display: inline-grid;">
        <p style="Text">{{'cart.general.dia' | t}} </p>
        <div ng-if="myCheck">
            <input type="text" id="rightdia" ng-model="user.leftdia" disabled>
        </div>
        <div ng-if="!myCheck">
            <input type="text" id="rightdia" >
        </div>
    </div>
</div>
<style>
    .mp-atc-conf-cart {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }
    .mp-atc-item-desc-cart {
        display: grid;
        grid-template-columns: 6rem 1fr 6.625rem;
        gap: 1rem;
        align-items: center;
        padding: 0.5rem 0;
    }
    </style>```

Answer 1

Why not make your life easy and store the data in a service or factory. Something like...

storefrontApp.component("vcManualDataLeft", {
  ...
  controller: ['dataFactory', function(dataFactory) {
    var $ctrl = this;
    $ctrl.addAName = function() {
      dataFactory.setData({
        name: $ctrl.newName
      })
      $ctrl.newName = '';

      // from any controller or component you can now retrieve the value stored with something like:
      let theValue = dataFactory.getData('name')

    };
  }],
});


angular.module('storefrontApp.dataFactory', [])
  .factory('dataFactory', ['$http', '$q',
    function($http, $q) {
      var factory = {}
      factory.dataStore = {}

      factory.setData = function(obj) {
        for (var x in obj) factory.dataStore[x] = obj[x];
      }

      factory.getData = function(name) {
        return factory.dataStore[name];
      }
    }
  ])