Cannot use a link to change views properly

ionic-v1
1

Trying out Ionic 1 for the first time but I can’t get a simple link to change states properly.

I have two states: welcome and login

<ion-view>
  <ion-content>
    <h1>Welcome</h1>
    <a ui-sref="login">Login</a>
  </ion-content>
</ion-view>

<ion-view>
  <ion-content>
    <h1>Login</h1>
  </ion-content>
</ion-view>

My states:

.state('welcome', {
  url: '/welcome',
  templateUrl: 'templates/welcome.html',
  controller: 'AppCtrl'
})

.state('login', {
  url: '/login',
  templateUrl: 'templates/login.html',
  controller: 'LoginCtrl'
})

When I view my app in the browser I see the Welcome page normally but when I click on the link to go to the Login page, the h1 Login header just appears underneath the text already on the welcome page. The URL does update to /login and if I refresh then just the login h1 shows.

What am I doing wrong?