ionic/angular $state.go gives blank screen on change

I'm trying to implement a facebook login for my ionic app based on this tutorial Coenraets fb tutorial, but I am coming across some problems.

I use tabs in my app, but when I try and redirect a user to the login page (tab) if they are not logged in, the login page shows as being blank (the navigation bar is still at the top though). If I refresh the page though, the login page then shows correctly. I know it is at least trying to redirect the page because I can't go to other tabs, just always this blank login tab. Here is where I declare my tabs:

.config(function($stateProvider, $urlRouterProvider) {
   $stateProvider
     //setup an abstract state for the tabs directive
     .state('tab', {
       url: "/tab",
       abstract: true,
       templateUrl: "templates/tabs.html"
     })
     .state('tab.login', {
       url: '/login',
       views: {
         'tab-login': {
           templateUrl: 'templates/tab-login.html',
           controller: 'AppCtrl'
         }
       }
     })
     //example of another state 
     .state('tab.map', {
       url: '/map',
       views: {
         'tab-map': {
           templateUrl: 'templates/tab-map.html',
           controller: 'MapController'
         }
       }
     })

Here is what my Login Tab HTML looks like:

<ion-view title="Login" name="tab-login" hide-back-button="true" style="background: #1b5a83" hide-nav-bar="true">
<ion-content has-header="true" padding="true" ng-controller="AppCtrl">
    <div class="list list-inset"  style="background: #1b5a83">
        <div class="item item-image" style="border:none;margin-top:50px;">
            <img src="img/sociogram.jpg"/>
        </div>
        <button class="button button-block button-light" ng-click="facebookLogin()">
            <i class="icon ion-social-facebook"></i>
            &nbsp;Login with Facebook
        </button>
    </div>
</ion-content>

And here is where my redirection takes place inside the .run function:

.run(function($rootScope, $state, $ionicPlatform, $window, OpenFB) {
 OpenFB.init(fbappid, 'http://localhost:8100/oauthcallback.html', window.sessionStorage);

  $ionicPlatform.ready(function() {
  $rootScope.$on('$stateChangeStart', function(event, toState) {
        if (toState.name !== "tab.login" && toState.name !== "tab.logout" && !$window.sessionStorage['fbtoken']) {
            $state.go('tab.login');
            event.preventDefault();
        }
    });

    $rootScope.$on('OAuthException', function() {
        $state.go('tab.login');
    });
})

Any ideas where I am going wrong??? Thanks

Make sure that in your templates/tabs.html is a named <ion-nav-view>, because in your state 'tab.login' you tell UI router to look for a view placeholder with the name 'tab-login'. So you need to define this in your template:

<ion-nav-view name="tab-login">

Or you change your state definition to use an empty view name, so it references your unnamed <ion-nav-view> in the parents state 'tab':

  .state('tab.login', {
       url: '/login',
       views: {
         '': {
           templateUrl: 'templates/tab-login.html',
           controller: 'AppCtrl'
         }
       }
     })

In your linked example there is only one named view vor all states, see https://github.com/ccoenraets/sociogram-angular-ionic/blob/master/www/templates/menu.html#L7

Have a look at multiple nested views in UI router here: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views