JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="MyCtrl">{{availableGroups|json}}
    </div>
</div>

CSS

div {
    white-space: pre;
}

JavaScript

function MyCtrl ($scope) {
    $scope.groups = [
    {
        id: "123",
        title: "123",
        options: []
    },
    {
        id: "456",
        title: "456",
        options: [
            {
                id: "0123",
                title: "0123",
                options: []
            }
        ]
    },
    {
        id: "789",
        title: "789",
        options: []
    },
];

    $scope.assignedGroups = [
    {
        id: "123",
        title: "123",
        options: []
    },
    {
        id: "789",
        title: "789",
        options: []
    },
];


    $scope.availableGroups = (function () {
        var assignedGroupsIds = {};
        var groupsIds = {};
        var result = [];

        $scope.assignedGroups.forEach(function (el, i) {
          assignedGroupsIds[el.id] = $scope.assignedGroups[i];
        });

        $scope.groups.forEach(function (el, i) {
          groupsIds[el.id] = $scope.groups[i];
        });

        for (var i in groupsIds) {
            if (!assignedGroupsIds.hasOwnProperty(i)) {
                result.push(groupsIds[i]);
            }
        }

        return result;    
    }());
}