Ui-router FromState is always ^, infinite loop

Question

I'm only calling $state.go once. After the first call to $state.go, the page keeps refreshing itself and calling $stateChangeStart. I'm suspecting it has something to do with the StateProvider configuration. Any pointers as to what could be wrong?

Here's a gif of the problem, and the code I think is the culprit below: http://i.giphy.com/3o85xGdxHnkanVecgM.gif

angular.module('ticketingSystemApp', ['ui.router', 'ngCookies', 'ticketingSystemApp.filters', 'ticketingSystemApp.directives', 'ticketingSystemApp.controllers', 'ticketingSystemApp.services'])
.run(['$state',  '$rootScope', function ($state, $rootScope) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        alert("ToState=" + toState.name + " FromState=" + fromState.name + " url=" + fromState.Url);

        if (($rootScope.username == null || $rootScope.password == null) && toState.name !== "login") {
            $state.go("login");
            e.preventDefault();
        }  else if ($state.name === "") {
            $state.go('userpanel');
            e.preventDefault();
        } 
    });
    }
]);



    .config([
        '$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
            $locationProvider.hashPrefix('!').html5Mode(true);
            // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
            // ------------------------------------------------------------------------------------------------------------
            $stateProvider
                .state('login', {
                    url:'/login',
                    views: {
                        "mainContent": {
                            templateUrl: '/Account/Login'
                        }
                    }

                })
                .state('userpanel', {
                    url:'/userpanel',
                    views: {
                        "mainContent": {
                            templateUrl: '/UserPanel'
                        }
                    }

                });

            //We don't know where we are. Go to user panel.
            $urlRouterProvider.otherwise(function ($injector, $location) {
                var $state = $injector.get('$state');

                if ($state.name === undefined) {
                    $state.go('userpanel');
                    return;
                }

            });
        }
    ])

Answer 1

Stupid mistake - if you're encountering this problem, remember that calling TemplateUrl on a server side page will cause that server side page to render, which in turn will call the master page to render.

So if you define your angular scripts in the master page, using code like the above will break it.