Navigation between pages in ionic and angularjs mobile app

I am very new in ionic angularja world. started to work on very simple thing but stuck.

My requirement,

I am creating an login page and a register page. if user click on register button from login page, user will navigate to register page.

here is my login page 

  <body ng-app="starter"
       class="platform-android platform-cordova platform-webview">

     <ion-header-bar align-title="center" class="bar-positive">
         <h1 class="title">Log In</h1>
     </ion-header-bar> 
     <ion-content> Some content! </ion-content> 
     <ion-footer-bar align-title="center" class="bar-positive right">
          <div class="button-bar">
             <a class="button button-clear" href="#/register">Register</a>
          </div>     
     </ion-footer-bar>
    </body>

here is my app.js.

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
});
})

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('user.register', {
url: '/register',
views: {
'page-register': {
templateUrl: 'templates/register.html'
}
}
})

});

i have a register.html page in templates folder.

Project Structure here ..

Please help me to resolve this navigation issue.

Thanks in advance.

Ajoy

use ui-sref="user.register" instead of href="#/register"