JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Angular習</h1>
 <div ng-app>
    <div ng-controller="mainCtrl">
    <form novalidate name="myForm" >
    <p>Group:
    <select ng-model="group" ng-options="g.name for g in groups" ng-change="change()">
        <option value="">-- chose group --</option>
    </select>
    </p>
    <p>User:
    <select ng-model="user" ng-options="u.name for u in listUsers">
        <option value="">-- chose user --</option>
    </select>
    </p>
    </form>
    <pre>グループ名 : {{group.name}}</pre>
    <pre>ユーザー名 : {{user.name}}</pre>
     </div>
</div>

JavaScript

var mainCtrl = function($scope) {
    $scope.groups=[
        {"name":"管理者","id":"1"},
        {"name":"オペレーター","id":"2"},
        {"name":"ユーザー","id":"3"},
    ];
    $scope.group = null;
    $scope.users = [ｚｚ
        {"name":"木村","id":"1","group_id":"2"},
        {"name":"草薙","id":"2","group_id":"3"},
        {"name":"中居","id":"3","group_id":"1"},
        {"name":"稲垣","id":"4","group_id":"3"},
        {"name":"香取","id":"5","group_id":"3"},
        {"name":"森","id":"6","group_id":"3"},
        {"name":"坂本","id":"7","group_id":"2"},
        {"name":"長野","id":"8","group_id":"3"},
        {"name":"井ノ原","id":"9","group_id":"3"},
        {"name":"森田","id":"10","group_id":"3"},
        {"name":"三宅","id":"11","group_id":"3"},
        {"name":"岡田","id":"12","group_id":"3"},
    ];
     
    $scope.listUsers = null;
    $scope.change = function(){
        $scope.listUsers = [];
        for(var i=0;i<$scope.users.length;i++){
            if($scope.users[i].group_id ==$scope.group.id){
                 $scope.listUsers.push($scope.users[i]);  
            }
        }
    };
    $scope.user = null;
    
}