JSFiddle - React, Tailwind, and code Playground

HTML

<section ng-app ng-controller="Controller">
	<h2 class="page-title">Model</h2>
    <div class="row-fluid">
        <div class="span4">
            <label for="cboGroup">Group</label>
				<select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select>
        </div>
        <div class="span4">
            <label for="cboItem">Items</label>
				<select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select>
        </div>
        <div class="well">
                what I am trying to archive is that the items are changing each time the group changes.
        </div>
    </div>
</section>

JavaScript

function Controller($scope) {

    var groups = [{
        "Id": "1",
            "Name": "Group 1",
            "Items": [{
            "Id": "1",
                "Name": "Item 1"
        }, {
            "Id": "2",
                "Name": "Item 2"
        }, {
            "Id": "3",
                "Name": "Item 3"
        }, {
            "Id": "4",
                "Name": "Item 4"
        }]
    }, {
        "Id": "2",
            "Name": "Group 2",
            "Items": [{
            "Id": "5",
                "Name": "Item 5"
        }, {
            "Id": "6",
                "Name": "Item 6"
        }, {
            "Id": "7",
                "Name": "Item 7"
        }, {
            "Id": "8",
                "Name": "Item 8"
        }]
    }];

    $scope.groups = groups;
    $scope.currentGroup = groups[0];
    $scope.currentItems = $scope.currentGroup.Items;
    $scope.currentItem = $scope.currentItems[0];
    
    $scope.$watch('currentGroup', function () {
        $scope.currentItems = $scope.currentGroup.Items;
        $scope.currentItem = $scope.currentGroup.Items[0];
    });
}