title: Why doesn't my Ionic state provider work?
body: <p>So I wanted to extend my project to better work with Mobile devices and changed from using Angularjs to Ionic/Angular.I got the controller working fine, but for some reason my $stateProvider doesn't react at all.</p>
  
  <p>this is my main app.js</p>
  
  <pre><code>angular.module('mainApp', ['ionic'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  
    // Don't remove this line unless you know what you are doing. It stops the viewport
    // from snapping when text inputs are focused. Ionic handles this internally for
    // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  </code></pre>
  
  <p>Here is my config.js, which doesn't seem to work at all, although it doesn't give any errors in to the console. Shouldn't it give an error if it isn't able to find the template? Or if it can't resolve the state?</p>
  
  <pre><code>angular.module('mainApp', ['ionic'])
  
  .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider.
        state('/frontpage', {
          templateUrl: './views/frontpage.html',
          controller: 'frontpageController',
          activetab: 'frontpage'
      }).
        state('/login', {
          templateUrl: './views/login.html',
          controller: 'loginController',
          activetab: 'login'
        }).
          state('/register', {
          templateUrl: './views/register.html',
          controller: 'registerController',
          activetab: 'register'
        }).
        otherwise({
          redirectTo: '/frontpage'
        });
  })
  </code></pre>
  
  <p>This is my controllers.js I only tested that my testController works, although when $state.go('/login') is called it gives an error, Error: Could not resolve '/login' from state ''</p>
  
  <pre><code>angular.module('mainApp', ['ionic'])
  
  .controller('mainController', function($scope, $state){
      $scope.$state=$state;
  })
  
  .controller('frontpageController', function($scope){
      $scope.test="frontpage";
  })
  
  .controller('testController', function($scope, $state){
      $scope.test="hmm";
      $scope.testi = function(){
              $state.go('/login');
              $scope.test="lol";
              console.log('test');
      };
  })
  
  .controller('loginController', function($scope, $http, $state){
      $scope.rememberMe = false;
      $scope.authenticate = function(user){
          $scope.loginError = "";
          $http.post('http://localhost:8080/api/authenticate', user)
          .success(function(response) {
              if (response.success === true){
                  $state.go("/frontpage");
                  console.log(response.msg);
              }else if (response.success === false){
                  console.log(response.msg);
                  $scope.loginError = "login failed";
              };
          })
          .error(function(response, status) {                                            
              alert('Error! ' + status + ' : ' + response);                               
          });
      };
  })
  
  .controller('registerController', function($scope, $http, $location){
      $scope.register = function(user){
          $scope.registerError = "";
          if (user.password === user.repassword)
              $http.post('http://localhost:8080/api/users', user)
                  .success(function(response) {
                      console.log(user);
                  })
                  .error(function(response, status) {                                            
                      alert('Error! ' + status + ' : ' + response);                               
                  });
          else
              $scope.registerError = "passwords do not match";        
      }
  });
  </code></pre>
  
  <p>Just in case here is my index.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;saunaguard&lt;/title&gt;
  
      &lt;link rel="manifest" href="manifest.json"&gt;
  
      &lt;!-- un-comment this code to enable service worker
      &lt;script&gt;
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker.register('service-worker.js')
            .then(() =&gt; console.log('service worker installed'))
            .catch(err =&gt; console.log('Error', err));
        }
      &lt;/script&gt;--&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;!-- your app's js --&gt;
  
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/config.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body ng-app="mainApp"&gt;
      &lt;div ng-controller = "testController"&gt;
          &lt;ul id ="selection"&gt;
              &lt;li ng-class="{active: $state.current.activetab == 'frontpage'}"&gt;&lt;a href ="#frontpage"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li ng-class="{active: $state.current.activetab == 'login'}"&gt;&lt;a href ="#login"&gt;Login&lt;/a&gt;&lt;/li&gt;
              &lt;li ng-class="{active: $state.current.activetab == 'register'}"&gt;&lt;a href ="#register"&gt;Register&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;button ng-click="testi()"&gt;Submit&lt;/button&gt; {{test}}
      &lt;/div&gt;
      &lt;ion-nav-view&gt;  
          &lt;ion-pane&gt;
            &lt;ion-content&gt;
  
            &lt;/ion-content&gt;
          &lt;/ion-pane&gt;
      &lt;/ion-nav-view&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>