JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <div ng-model="main">
        {{main.title}}
        <select ng-model="s" ng-change="$emit('update:dependent.list')" ng-option="m for m.name in main.list"></select>
    </div>
    
    <input ng-click="$emit('swap')" type="button" value="swap" />
    
     <div ng-model="dependent">
        {{dependent.title}}
        <select ng-model="g" ng-change="$emit('update:grid')" ng-option="d for d.name in dependent.list"></select>
    </div>
    
    
</div>

JavaScript

var app = angular.module( "app", [] );

function model () {
};

model.prototype.update = function ( data ) {
    var params = this.getParams( data );
    
    return new Promise ( function ( resolve, reject ) {
        request( this.getParams() );
    
        function request () {
            resolve();
            // get data from server
        }
    
    } );

};

function X () {
  this.title = "I am X";
  model.call( this );
}

X.prototype = Object.create( model.prototype );

X.prototype.getParams = function () {
    return {};
}


function Y () {
  this.title = "I am Y";
  model.call( this );
}

Y.prototype = Object.create( model.prototype );

Y.prototype.getParams = function () {
    return {};
}



app.controller( "ctrl", function ( $scope ) {
    
    $scope.main = new X;
    $scope.dependent = new Y;
    
     $scope.$on ( "update:main.list", function ( id )  {
         dependent.update( null )
         .then ( function ( id ) {
             $scope.$emit( "update:dependent.list",  id );
         } )
    } );
    
    $scope.$on ( "update:dependent.list", function ( id )  {
        dependent.update( /*main_id*/ );
    } );
    
    
    $scope.$on ( "swap", function () {
        var temp = $scope.main;
        $scope.main = $scope.dependent;
        $scope.dependent = temp;
    } );

} );