JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller='TestGroupingCtlr'>
        <h1>Multiple Grouping Parameters</h1>
        <div ng-repeat="item in MyList  | orderBy:'groupfield' | groupBy:['groupfield', 'deep.category']">
            <h2 ng-show="item.group_by_CHANGED">{{item.groupfield}} {{item.deep.category}}</h2>
            <ul>
                <li>{{item.whatever}}</li>
            </ul>
        </div>  
        
        <form role="form" ng-submit="AddItem()">
            <input type="text" data-ng-model="item.groupfield" placeholder="Group">
            <input type="text" data-ng-model="item.whatever" placeholder="Item">
            <input type="text" data-ng-model="item.deep.category" placeholder="Category">
            <br />
            <input class="btn" type="submit" value="Add Item">
        </form>
    </div>
</div>

JavaScript

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

    app.controller('TestGroupingCtlr', function ($scope) {

        $scope.MyList = [{
            groupfield: 'Group 1',
            whatever: 'abc',
            deep: {
                category: 'A'
            }
        }, {
            groupfield: 'Group 1',
            whatever: 'def',
            deep: {
                category: 'A'
            }
        }, {
            groupfield: 'Group 2',
            whatever: 'ghi',
            deep: {
                category: 'A'
            }
        }, {
            groupfield: 'Group 2',
            whatever: 'jkl',
            deep: {
                category: 'B'
            }
        }, {
            groupfield: 'Group 2',
            whatever: 'mno',
            deep: {
                category: 'B'
            }
        }];

        $scope.AddItem = function () {

            // add to our js object array
            $scope.MyList.push({
                groupfield: $scope.item.groupfield,
                whatever: $scope.item.whatever,
                deep:{
                    category: $scope.item.deep.category
                }           
            });
        };


    })


    /*
     * groupBy
     *
     * Define when a group break occurs in a list of items
     *
     * @param {array}  the list of items
     * @param {String} then name of the field in the item from the list to group by
     * @returns {array}	the list of items with an added field name named with "_new"
     *					appended to the group by field name
     *
     * @example		<div ng-repeat="item in MyList  | groupBy:'groupfield'" >
     *				<h2 ng-if="item.groupfield_CHANGED">{{item.groupfield}}</h2>
     *
     *				Typically you'll want to include Angular's orderBy filter first
     */

    app.filter('groupBy', ['$parse', function ($parse) {
    return function (list, group_by) {

        var filtered = [];
        var prev_item = null;
        var group_changed = false;
        // this is a...