ionic change location won't work

i'm new in ionic ( just a little less in angularjs ) .

i'm trying to do a simple switch between two views:

HTML

<body ng-app="starter" animation="slide-left-right-ios7">
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view name="intro"></ion-nav-view>
    <ion-nav-view name="login"></ion-nav-view>
    <ion-nav-view name="home"></ion-nav-view>
    <ion-nav-view name="pizze"></ion-nav-view>
    <ion-nav-view name="sponsor"></ion-nav-view>
    <ion-nav-view name="scontrino"></ion-nav-view>
  </body>

APP.js

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider


    .state('intro', {
      url: '/intro',
      views: {
        'intro': {
          templateUrl: 'templates/intro.html',
          controller: 'IntroCtrl'
        }
      }
    })
    .state('login', {
      url: '/login',
      views: {
        'login': {
          templateUrl: 'templates/login.html',
          controller: 'LoginCtrl'
        }
      }
    })
  $urlRouterProvider.otherwise('/intro');

});

Controllers.js

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

.controller('IntroCtrl', function($scope,$location) {
    $location.url("/login");

})
.controller('LoginCtrl', function($scope,$location) {

})

Intro is shown correctly but when it tries to change location to "login.html" it says:

TypeError: Cannot read property 'querySelectorAll' of undefined
    at cancelChildAnimations (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:30611:21)
    at Object.leave (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:30176:11)
    at Object.leave (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:38411:24)
    at updateView (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:41540:31)
    at eventHook (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:41501:17)
    at Scope.$broadcast (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:21190:28)
    at $state.transition.resolved.then.$state.transition (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:33975:22)
    at wrappedCallback (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:19894:81)
    at http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:19980:26
    at Scope.$eval (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:20906:28)

What could be the problem???

Thanks!

Try this

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

.controller('IntroCtrl', function($scope,$state) {
     $state.transitionTo("login");

})
.controller('LoginCtrl', function($scope,$location) {

})

You are using the view names wrong. In a state, the view's name

views: {
  '_name_': {
}

is used for different navigation histories for different views.

Say you have two tabs, home and pizza, and you want both to have several pages, then the view name comes in handy.

For your example it is important to know, how you want the views to be used. I set up an example for you, making the views accessible in tabs. See here for that example: http://plnkr.co/edit/Yd5ehQd0wnwlPzP0KYnp?p=preview