title: Ui-router 1.0.0.beta1 $transitions.onSuccess from $rootScope.on('$stateSuccess',
body: <p>In my AngularJS (v. 1.5.x), I'm converting my controller-based states to component-based states with <a href="https://ui-router.github.io/ng1/" rel="nofollow noreferrer">ui-router 1.0.0 (currently in beta 1)</a>.</p>
  
  <p>I'm having troubles catching state changes, that where previously caught with <code>$rootScope.on('$stateSuccess', ...</code>. As far as I can tell, I am doing what described <a href="https://ui-router.github.io/docs/latest/classes/transition.transitionservice.html" rel="nofollow noreferrer">in the docs</a>, and in this <a href="https://stackoverflow.com/questions/37786841/replacing-ui-router-0-2-with-1-0-0">SO question</a>, therefore I am wondering if I am missing something or if this is a bug of the beta 1 release.</p>
  
  <p>I have not converted all controllers yet, only few.</p>
  
  <p>The converted ones look like this (based on info gotten from <a href="https://github.com/angular-ui/ui-router/issues/2627" rel="nofollow noreferrer">RFC: Routing to Angular 1.5 .component()</a>):</p>
  
  <pre><code>.state('componentstate', {
      url: '/myUrl',
      component : 'myComponent'
  });
  </code></pre>
  
  <p>Navigation to this states works fine.</p>
  
  <p>To update my code to the new <code>Transitions</code> logic, I'm changing this:</p>
  
  <pre><code>$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
      if($state.current.name == 'acontrollerbasedstate') // do stuff;
  });
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>$transitions.onSuccess( { to: 'acontrollerbasedstate', from: '*' }, function() {
      // I've also tried { to: '*', from: '*' }
      console.log('running');
      // do stuff
  });
  </code></pre>
  
  <p>Since it was not working, I've also testes all methods:</p>
  
  <pre><code>$transitions.onBefore( { to: '*', from: '*' }, function() {
    console.log('onBefore');
  });
  $transitions.onEnter( { to: '*', from: '*' }, function() {
    console.log('onEnter');
  });
  $transitions.onError( { to: '*', from: '*' }, function() {
    console.log('onError');
  });
  $transitions.onExit( { to: '*', from: '*' }, function() {
    console.log('onExit');
  });
  $transitions.onFinish( { to: '*', from: '*' }, function() {
    console.log('onFinish');
  });
  $transitions.onRetain( { to: '*', from: '*' }, function() {
    console.log('onRetain');
  });
  $transitions.onStart( { to: '*', from: '*' }, function() {
    console.log('onStart');
  });
  $transitions.onSuccess( { to: '*', from: '*' }, function() {
    console.log('onSuccess');
  });
  </code></pre>
  
  <p>Unfortunately nothing ever gets printed in the console, which means the callback function of <code>$transitions.onSuccess</code> never gets executed.</p>
  
  <pre><code>//////
  UPDATE
  //////
  </code></pre>
  
  <p>I've tried without declaring <code>to</code> or <code>from</code>, and it works:</p>
  
  <p>$transitions.onStart( {}, scrollToTop);</p>
  
  <pre><code>$transitions.onSuccess({}, function(){
      // here I use $scope.current.name, which for my purposes, works fine for now
  });
  </code></pre>