使用ng-repeat在数组$ first项上的条件类

Question

I am building an app that pulls and displays a list of time slots from a database using ng-repeat. I also have a navigation that pulls and displays the month/day from the same database using ng-repeat. When you click on one of the days in the nav, ng-click will filter the list of times that match the day chosen...this all works.

My issue is having the first nav array item activated so the user will know which day they are starting from - the below screen is the first view and although th times below are for the first array item; you wouldn't know because theres no class to it. I was wondering if there is a way to conditionally set ng-class="$first ? 'active' : ''" until another link was clicked? Obviously just setting $first works, but it stays active even when choosing another date. Below is the code for the nav. I am using angular-material for the ui and ui-router for my router. In the image below you'll notice that JAN FRI 30 is the first item displayed in the array. Thank you for your help.

<ul hide-gt-sm>
        <li ng-repeat="day in times">
          <md-button class="md-primary"
                      ui-sref-active="{{day.date}}"
                      ng-click="filterMobileTimes(day.date.fullDate)"
                      ng-class="$first ? 'active' : ''">
            {{day.date.month}}<br>{{day.date.day}}
          </md-button>
        </li>
      </ul>

Answer 1

out of the simples ways of achieving this are

<ul hide-gt-sm ng-init="activeIndex=0">
    <li ng-repeat="day in times">
      <md-button class="md-primary"
                  ng-click="activeIndex=$index; filterMobileTimes(day.date.fullDate)"
                  ng-class={active:(activeIndex==$index)}>
        {{day.date.month}}<br>{{day.date.day}}
      </md-button>
    </li>
  </ul>

or w/o initializing

<ul hide-gt-sm>
    <li ng-repeat="day in times">
      <md-button class="md-primary"
                  ng-click="activeIndex=$index; filterMobileTimes(day.date.fullDate)"
                  ng-class={active:(activeIndex?activeIndex==$index:$first)}>
        {{day.date.month}}<br>{{day.date.day}}
      </md-button>
    </li>
  </ul>