<div class="main" layout="column" layout-align="center center" layout-fill>
    <md-card>
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">Welcome to the HydroZone!</span>
                <span class="md-subhead">Two Zones Enter, One Zone Leaves (well-hydrated)!</span>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <form name="apiTokenForm">
                <md-input-container class="md-block">
                    <label>Rachio API Token</label>
                    <input
                        id="apiToken"
                        name="token"
                        type="text"
                        ng-model="vm.apiToken"
                        ng-model-options="{ debounce: 500 }"
                        ng-pattern="vm.regex"
                        ng-change="vm.submit()"
                        ng-disabled="vm.disableAll"
                        required>
                    <div ng-messages="apiTokenForm.token.$error" role="alert">
                        <div ng-hide="apiTokenForm.token.$valid" ng-message="pattern">API Key is Invalid</div>
                    </div>
                </md-input-container>
            </form>
        </md-card-content>
    </md-card>
</div>
<div ng-if="vm.disableAll" class="loading" layout-fill layout="column" layout-align="center center">
    <md-progress-circular md-mode="indeterminate" md-diameter="100"></md-progress-circular>
</div>

<div class="main" layout="column" layout-align="center center" layout-fill>
    <md-card>
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">Welcome to the HydroZone!</span>
                <span class="md-subhead">Two Zones Enter, One Zone Leaves (well-hydrated)!</span>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <form name="apiTokenForm">
                <md-input-container class="md-block">
                    <label>Rachio API Token</label>
                    <input
                        id="apiToken"
                        name="token"
                        type="text"
                        ng-model="vm.apiToken"
                        ng-model-options="{ debounce: 500 }"
                        ng-pattern="vm.regex"
                        ng-change="vm.submit()"
                        ng-disabled="vm.disableAll"
                        required>
                    <div ng-messages="apiTokenForm.token.$error" role="alert">
                        <div id="invalidKey" ng-hide="apiTokenForm.token.$valid" ng-message="pattern">API Key is Invalid</div>
                    </div>
                </md-input-container>
            </form>
        </md-card-content>
    </md-card>
</div>
<div ng-if="vm.disableAll" class="loading" layout-fill layout="column" layout-align="center center">
    <md-progress-circular md-mode="indeterminate" md-diameter="100"></md-progress-circular>
</div>

Add an ID for the Invalid Key message
Add an ID for the Invalid Key message

Easier to feature test
