JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='myApp'>
    <div ng-controller='TestGroupingCtlr'>
        <div group-with-headers list="MyList" group-by="GroupByFieldName"
        </div>
    </div>
</div>

JavaScript

angular.module('myApp', []).directive('GroupWithHeaders', function() {
    return {
        template: "<div ng-repeat='(group, items) in groups'>" +
                    "<h2>{{group}}</h2>" +
                    "<div ng-repeat='item in items'>" +
                      "{{item.whatever}}" +   
                    "</div>" +
                  "</div>",
        scope: {
            list: '&'  
        },
        link: function(scope, element, attrs) {
            console.log('test');
            var groups = {};
            for (var i = 0; i < list.length; i++) {
                var group = list[i][attrs.groupBy];
                if (group) {
                    if (groups[group]) {
                        groups[group].push(list[i]);
                    } else {
                        groups[group] = [list[i]];
                    }
                }    
            }
        }
      };
});

function TestGroupingCtlr($scope) {

  $scope.MyList = [
    {GroupByFieldName:'Group 1', whatever:'abc'},
    {GroupByFieldName:'Group 1', whatever:'def'},
    {GroupByFieldName:'Group 2', whatever:'ghi'},
    {GroupByFieldName:'Group 2', whatever:'jkl'},
    {GroupByFieldName:'Group 2', whatever:'mno'}
  ];
   
$scope.newGrouping = function(group_list, group_by, index) {
    if (index > 0) {
      prev = index - 1;
      if (group_list[prev][group_by] !== group_list[index][group_by]) {
        return true;
      } else {
        return false;
      }
    } else {
      return true;
    }
  };
}