title: Ionic with angular js. the button not linked to another html
body: <p>Can someone help me on how to fix this?
  Seems like I can't get my button to link to another page.
  I did some research and try to follow the demo, but it's dead end.
  I don't know which part I should fix.</p>
  
  <p>register.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="starter"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
      &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
      &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
      --&gt;
  
      &lt;!-- ionic/angularjs js --&gt;
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
      &lt;!-- cordova script (this will be a 404 during development) --&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
  
      &lt;!-- your app's js --&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="starter"&gt;
  
      &lt;ion-pane&gt;
  
        &lt;ion-view view-title="Register"&gt;
          &lt;ion-content&gt;
            &lt;div class="bar bar-header bar-stable"&gt;
              &lt;h1 class="title"&gt;Register&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div ng-controller="RegistrationCtrl" class="content"&gt;
            &lt;button class="button button-positive" ng-click="goToNextState()"&gt;Go to next state (page)&lt;/button&gt;
          &lt;/div&gt;
        &lt;/ion-content&gt;
      &lt;/ion-view&gt;
  
  
  
      &lt;/ion-pane&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>after.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
      &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
      &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
      --&gt;
  
      &lt;!-- ionic/angularjs js --&gt;
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
      &lt;!-- cordova script (this will be a 404 during development) --&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
  
      &lt;!-- your app's js --&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="starter"&gt;
  
      &lt;ion-pane&gt;
  
        &lt;ion-view view-title="After"&gt;
          &lt;ion-content&gt;
            &lt;div class="bar bar-header bar-stable"&gt;
              &lt;h1 class="title"&gt;Register&lt;/h1&gt;
          &lt;/div&gt;
              &lt;div ng-controller="AfterCtrl" class="content"&gt;
                &lt;button class="button button-positive" ng-click="goToPrevState()"&gt;Go to prev state (page)&lt;/button&gt;
              &lt;/div&gt;
          &lt;/ion-content&gt;
        &lt;/ion-view&gt;
  
  
      &lt;/ion-pane&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js </p>
  
  <pre><code> var app = angular.module('starter', ['ionic'])
  app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  
  app.config(function($stateProvider, $urlRouterProvider) {
          $stateProvider
              .state('register', {
                  url: '/',
                  templateUrl: 'register.html',
                  controller: 'RegistrationCtrl'
              })
              .state('after', {
                  url: 'after',
                  templateUrl: 'after.html',
                  controller: 'AfterCtrl'
              });
          $urlRouterProvider.otherwise('/');
      });
  
  app.controller("RegistrationCtrl", function($scope, $location){
        $scope.goToNextState = function() {
          $location.path("/after");
        };
      });
  
  app.controller("RegistrationCtrl", function($scope, $location){
        $scope.goToNextState = function() {
          $location.path("/after");
        };
      });
  </code></pre>