I have 2 JSON that I merge inside an [{}], they both have a value that references from which JSON they came : 'gridCode'

What I'm trying to achieve is having a visual separation in my view depending on the 'gridCode' like this : , top should be it's own group and bottom is own but they still are in the same JSON

I've tried many approach such as using angular.filter groupBy method and filter pipe but without success, would appreciate a lot if someone could guide me :)

Here's what my repeater looks like :

<div class="flex-grid" style="margin-top: 1.5rem" ng-repeat="question in autoQuestions track by $index"
     data-keyboard="false"
     data-backdrop="static">
    <div class="row" style="align-items: center;">
        <div class="cell colspan6" style="text-align: end; padding-right: 10%">{{question.libelle}}</div>
        <label class="input-control checkbox cell colspan6">
            <input type="checkbox" ng-model="reponseQuestion[$index].answer"
                   ng-init="reponseQuestion[$index].answer=false" ng-click="enableBtn(question.code, $index)">
            <span class="check"></span>
        </label>
    </div>
</div>

a Sample of my JSON :

var autoQuestions = [{
 0 : { autocontroleGestionnaireReponse : null,
       libelle: test,
       gridCode: 123
       questionCode: 1478
      },
 1 : { autocontroleGestionnaireReponse : null,
       libelle: testTest,
       gridCode: 1234
       questionCode: 147896
      }