Angular.JS : OrderBy ng-repeat through BootStrap Column

Question

I wanted to divide my data in four columns to be able to show a grid of images linking to each mission. The code below worked perfectly before trying to order it by the mission type.

As the MissionID don't correspond anymore with the actual order, the mission order is all over the place.

Of course putting "|order by -mission" everywhere doesn't work because of the divided ng-repeat.

Do you have any idea how to proceed ?

<div  ng-repeat="missionType in SAM.missions | unique: 'missionType'"  class="borderbetweenmissionStyle"> 
TITLE / {{missionType.missionType}}

<div class="row">
<div class="col s3">
<div ng-repeat=" patch in SAM.missions " ng-if="missionType.missionType == patch.missionType && patch.MissionID % 4 ==1" >

    <a ng-href="#/missions/{{patch.MissionID}}">
                        <figure>
                            <img class="circle responsive-img z-depth-1 " id="imgMissions" ng-src="IMG/Missions/Mission_Logo/{{patch.MissionID}}/{{patch.Mission_Logo}} ">  
                            <p style="text-align: center;"> {{patch.Mission}}   </p>

                        </figure>
    </a>


</div>
</div>


<div class="col s3">
<div ng-repeat=" patch in SAM.missions" ng-if="missionType.missionType == patch.missionType && patch.MissionID % 4 ==2" >

    <a ng-href="#/missions/{{patch.MissionID}}">
                        <figure>
                            <img class="circle responsive-img z-depth-1 " id="imgMissions" ng-src="IMG/Missions/Mission_Logo/{{patch.MissionID}}/{{patch.Mission_Logo}} ">  
                            <p style="text-align: center;"> {{patch.Mission}}   </p>

                        </figure>
    </a>



</div>
</div>

Edit : Example of one mission Type :

For now it displays :

and I would like this: