title: Angular ui.router infinite loop on $state or $location change
body: <p>I am at the end of my wits, nerves, everything, for the past 4 hours I am TRYING to debug and reading all over the internet what the problem might be with this.</p>
  
  <p>So, I am working on mocking up a mobile application and my logic is like this:</p>
  
  <ol>
  <li>If the user has logged in the past, we have data in localStorage about that, then show him the listing. this is offline</li>
  <li>If we are connected to the internet, show the listing first and in the background check to see if he is still logged in</li>
  <li>If HE ISN'T, redirect to login page.</li>
  </ol>
  
  <p>On the main Home view, I am evaluating the above statements, first I show him the listing if he has localStorage data, then I check online and redirect to login if necessary.</p>
  
  <p>Whenever I have two $state or $locations it <strong>loops</strong>. Like the browser almost freezes, lucky it's Chrome. and I get the <code>Cannot call method 'insertBefore' of null</code>. From what I read, a known angular.ui router issue, if used bad or some other mystical problem.</p>
  
  <p>Some Code:</p>
  
  <p>These event emitters and receivers, which I call in the return of my StateManagement Services</p>
  
  <pre><code>//Notification Helpers, also exposed, to keep them in the same scope tree.
          function emitNotification (event, data) {
              console.log('Emitting event: ' + event);
              $rootScope.$emit(event, data);
  
          }
  
          function emitListen (event, fn) {
              console.log('Listening for: ' + event);
              $rootScope.$on(event, function (e, data) {
                  fn(data);
              });
  
          }
  </code></pre>
  
  <p>.
  .
  .LOGIC</p>
  
  <pre><code>//Update the userData in localStorage and in .value
                                  $auth.storage.set('userData', data);
                                  userData = $auth.storage.get('userData'); //TODO: Redundant, store it directly, is it ok?
  
                                  emitNotification('event:auth-okServer', data);
                                  //return 'ok-server';
  </code></pre>
  
  <p>... return my service</p>
  
  <pre><code>},
              loginSuccess: function(data){
                  emitNotification('event:auth-loginSuccess', data);
              },
              loginFailed: function(data){
                  emitNotification('event:auth-loginFailed', data);
              },
              notify: emitNotification,
              listen: emitListen
  </code></pre>
  
  <p>And this is in my controller:</p>
  
  <pre><code>.config(function config($stateProvider) {
          $stateProvider
              .state('sidemenu.home', {
                  url: '/home',
                  views: {
                      'topView': {
                          controller: 'HomeCtrl',
                          templateUrl: 'home/home.tpl.html'
                      }
                  }
              })
              .state('sidemenu.home.list', {
                  url: '/list',
                  templateUrl: 'home/home-list.tpl.html',
                  controller: 'ListCtrl'
              })
              .state('sidemenu.home.login', {
                  url: '/login',
                  templateUrl: 'home/home-login.tpl.html',
                  controller: 'LoginCtrl'
              })
              .state('sidemenu.home.register', {
                  url: '/register',
                  templateUrl: 'home/home-register.tpl.html',
                  controller: 'RegisterCtrl'
              })
              .state('sidemenu.home.coach', {
                  url: '/coach',
                  templateUrl: 'home/home-coach.tpl.html',
                  controller: 'CoachCtrl'
              })
              ;
      })
  
      .controller('HomeCtrl', function HomeController($scope, $state, $location, localState) {
  
          /**
           * EVENT EMITTERS
           * @event:auth-loginSuccess - Login has been succesfull, let everybody know.
           * @event:auth-loginFailed  - Login has failed, do something.
           * @event:auth-okServer     - Server challenge ok, user is logged in.
           * @event:auth-okLocal      - Local challenge ok, user appears to be logged in.
           * @event:auth-login        - Go to login
           * @event:general-coach     - Start the coach
           **/
  
  
          /**
           * ===== FIRST LOGIC =====
           **/
  
  
          //We are placing emitters in the same children-parent tree scope, the one from localState, and we're listening to them.
          localState.listen('event:auth-okLocal', function(data) {
              console.log('EVENT: auth-okLocal has been triggered');
              //$state.transitionTo('sidemenu.home.list');
              $location.path('/sidemenu/home/list');
              //First we will be redirected on listpage
          });
  
          localState.listen('event:auth-login', function() {
              console.log('EVENT: auth-login has been triggered');
              $location.path('/sidemenu/home/login');
          });
          //Server check fails, redirect to login
          localState.listen('event:general-coach', function(data) {
              console.log('EVENT: general-coach has been triggered');
              //$state.transitionTo('sidemenu.home.coach');
              $location.path('/sidemenu/home//coach');
          });
  
          //After we have all the listeners in place do the checking &amp; broadcasting.
          localState.check();
  </code></pre>
  
  <p><strong>What am I doing wrong?</strong></p>
  
  <p>I have debugged the emitters, my check() function which creates all the emitters, I have tried several combinations on ui.router and I have miserably failed :).</p>