JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<div ng-controller="MyCtrl">
    <div ng-repeat="item in calendar | orderByDayNumber:'day' "><a href="/events/{{item.day}}" />
        <article class="eventslist">
            <div class="numberedDate">
                 <h3>{{item.day}}</h3>

            </div>
            <div class="calInfo">
                <p>{{item}}<a>more</a>

                </p>
            </div>
        </article>
    </div>
    <!-- ng-repeat item -->
</div>
<!-- ng-repeat cal -->
<!-- ngApp -->

JavaScript

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

myApp.filter('orderByDayNumber', function () {
    return function (items, field, reverse) {
        var filtered = [];
         var prop;
         console.log('prop,,,,,,,,,,,',prop);
        angular.forEach(items, function (item) {
          for (prop in field) {
        if (field.hasOwnProperty(prop)) {
           filtered.push({
                'key': prop,
                'value': field[prop]
            });
        }
        
    }
        });
        filtered.sort(function (a, b) {
            return a.value - b.value;
        });
        return filtered;
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.calendar = [

    {
        "day": "21",
            "title": "25",
            "summary": "85",
            "description": "74",
            "_id": "53"
    }, {
        "day": "2",
            "title": "14",
            "summary": "54",
            "description": "10",
            "_id": "54"
    }, {
        "day": "27",
            "title": "32",
            "summary": "12",
            "description": "65",
            "_id": "55"
    }

    ];


});