ボタンをクリックしてURLを変更しても、新しいビューは表示されませんか？

私はIONICアプリケーションの作業を開始しました。私はボタンをクリックすると、あるページから別のページへナビゲートするのが困難に直面しています。ここで私は今のところ唯一のログインボタンに焦点を当てたので、遠ボタンをクリックしてURLを変更しても、新しいビューは表示されませんか？

index.html-

<!DOCTYPE html> 
<html> 
    <head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link rel="manifest" href="manifest.json"> 



    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <script src="lib/ionic/js/angular/angular-resource.min.js"></script> 

    <script src="js/ng-cordova.min.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 


    <!-- your app's js --> 
    <script src="js/app.js"></script> 

    <base href="/"> 
    </head> 
    <body ng-app="starter"> 
    <div ng-controller="MainCtrl"> 
     <ion-content class="bg-img has-bottom"> 
     </ion-content> 
     <div class="fixed-outside">  
      <div class="row"> 
      <div class="col"> 
       <button ng-click="login_google()" class="button" id="google-btn">Connect with Google</button> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="col"> 
       <button ng-click="login_fb()" class="button" id="fb-btn">Connect with Facebook</button> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="col"> 
       <button class="button button-stable" ng-click="login()" id="login-btn">Login</button> 
      </div> 
      <div class="col"> 
       <button ng-click="register()" class="button button-stable" id="reg-btn">Register</button> 
      </div> 
      </div> 
     </div> 

    </body> 
</html>

やっていることです。クリックするとmain.htmlに移動する必要があります。

app.js-

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


.config(function($stateProvider, $locationProvider, $urlRouterProvider){ 
    $urlRouterProvider.when('', '/'); 
    $stateProvider 
     .state('index', { 
      cache: false, 
      url: '/', 
        templateUrl: "index.html", 
        controller: "MainCtrl"  
     }) 
     .state('main',{ 
      cache: false, 
      url: '/main', 
      templateUrl: 'templates/main.html', 
      controller: 'MainController' 
     }); 
     $locationProvider.html5Mode(true); 
     $urlRouterProvider.otherwise('/'); 

}) 

.controller('MainCtrl', function($scope, $state) { 
    $scope.login = function(){ 
    //console.log("Login clicked!"); 
    $state.go('main'); 
    console.log('the state is '+$state.stateName); 
    // window.location = "/main.html"; 
    // $scope.apply(); 
    };  
}) 

.controller('MainController', function($scope, $state) {  
    $scope.message = 'This is student list screen'; 
});

コンソール出力状態は、私は、ボタンのクリックで簡単なナビゲーションに同様のドキュメントに何かを見つけることができません

未定義である