First element in ng-repeat behaving differently (it should not)

Question

First element in ng-repeat behaving differently (it should not)

Firstly, I was unable to reproduce this issue on plunker, but my attempt is linked here: http://plnkr.co/edit/yFe07e

I have an ng-repeat which repeats A-Z and are displayed as buttons, for the user to click to filter their results.

The letters are arranged in a table to display horizontally, filling up all available width. It works perfectly for B-Z... but A does not show its animation effect. If I watch via an ng-click it does indeed register the click, the it does not animate the click like the rest of the letters.

I don't know why I'm unable to reproduce the issue on plunker, but hoping someone can point me in the right direction.

<ion-view view-title="Title">
  <ion-header-bar class="header-bar stable-bg">
    <img src="content/img/logo.png" class="logo">
    <span class="royal">Title</span>
    <div class="time royal">{{getTime()}}</div>
  </ion-header-bar>

  <ion-content class="energized-bg">
    <div class="letter-repeater stable-bg">
        <span ng-repeat="letter in letters" class="button button-outline button-royal">{{letter}}</span>
    </div>
  </ion-content>
</ion-view>

CSS in question:

.letter-repeater {
    z-index: 2;
    height: 15px;
    width: 100%;
    display: table;
    table-layout: fixed;
}
.letter-repeater > span {
    width: 100%;
    height: 100%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

1) Why is the first element in the ng-repeat not animating on click but the rest work perfectly?

Update

I have tried to isolate what's going on here by recreating on plnkr but have yet to be successful; I will try to explain the nesting of the view in question and my stack below.

The HTML near the top of this post is the root of home.html

index.html simply has <body ng-app="myApp"> <ion-nav-view></ion-nav-view> </body> with no css

The view is governed by Ionic->Angular UI-Router, as below

.state('home', {
            url: '/',
            views: {
                '': {
                    templateUrl: 'app/home/home.html',
                    controller: 'homeController'
                }
            }
        })

As you can see, nothing terribly interesting. The only customizations on Ionic's SCSS are color variables. Further, I have poured through all elements in the browser to ensure there's no overlap, and where I've found any I pushed it behind with z-index.

I am using Ionic, AngularJS, Cordova, JQuery

The issue presents itself when viewing in browser or on device

css
angularjs
ionic-framework