How to keep current month on top of list, when using ng-repeat in angularjs

Question

I have list of holidays and I am using ng-repeat to show this on html. it is working fine but I need current month's holidays(or upcoming) on top of list how to do that.... help me

My list is

$scope.holidaylist =
[
 {
  "lineId":0,
  "holidayMasterId":0,
  "holidayName":"NewYear",
  "startDate":"2016-01-01T00:00:00",
  "endDate":"2016-01-01T00:00:00",
  "startDay":"Friday"
  },
  {
  "lineId":0,
  "holidayMasterId":0,
  "holidayName":"Sankranthi",
  "startDate":"2016-01-15T00:00:00",
  "endDate":"2016-01-15T00:00:00",
  "startDay":"Friday"
  },
  {
  "lineId":0,
  "holidayMasterId":0,
  "holidayName":"Ugadi",
  "startDate":"2016-04-04T00:00:00",
  "endDate":"2016-04-04T00:00:00",
  "startDay":"Monday"
  },
  {
  "lineId":0,
  "holidayMasterId":0,
  "holidayName":"Ugadi",
  "startDate":"2016-04-05T00:00:00",
  "endDate":"2016-04-05T00:00:00",
  "startDay":"Tuesday"
  },
  {
  "lineId":0,
  "holidayMasterId":0,
  "holidayName":"Ugadi",
  "startDate":"2016-04-06T00:00:00",
  "endDate":"2016-04-06T00:00:00",
  "startDay":"Wednesday"
  },
  {
  "lineId":0,
  "holidayMasterId":0,
  "holidayName":"Ugadi",
  "startDate":"2016-04-07T00:00:00",
  "endDate":"2016-04-07T00:00:00",
  "startDay":"Thursday"
  },
  {
  "lineId":0,
  "holidayMasterId":0,
  "holidayName":"Ugadi",
  "startDate":"2016-04-08T00:00:00",
  "endDate":"2016-04-08T00:00:00",
  "startDay":"Friday"
  }
];

this is my markup

                <li ng-if="holidaylist!=null" class="order-item" ng-repeat="holiday in holidaylist">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-left">
                            <div class="item-booker">{{holiday.holidayName}}</div>
                            <div class="item-time">
                                <i class="fa fa-calendar"></i>
                                <span>{{holiday.startDate | date:'dd-MM-yyyy'}}</span>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-right">
                            <div class="item-price">
                                <span class="price">{{holiday.startDay}}</span>
                            </div>
                        </div>
                    </div>
                </li>

Answer 1

Use orderBy: 'startDate':true to sort the holidays. The reverse argument is a boolean value.

<li ng-if="holidaylist!=null" class="order-item" ng-repeat="holiday in holidaylist | orderBy: 'startDate':true">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-left">
                            <div class="item-booker">{{holiday.holidayName}}</div>
                            <div class="item-time">
                                <i class="fa fa-calendar"></i>
                                <span>{{holiday.startDate | date:'dd-MM-yyyy'}}</span>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-right">
                            <div class="item-price">
                                <span class="price">{{holiday.startDay}}</span>
                            </div>
                        </div>
                    </div>
                </li>