$stateChangeSuccess getting hit twice

The $stateChangeSuccess event in AngularJS is triggered whenever the state transition is successful, i.e., when the route changes and the corresponding controller and template have been loaded successfully. If you notice that the $stateChangeSuccess event is getting hit twice, there are a few potential reasons and solutions to consider:

1. Multiple Event Listeners: Check your code to ensure that you are not attaching multiple event listeners to the $stateChangeSuccess event inadvertently. If you have multiple event listeners, each one will be executed when the event is triggered, leading to multiple invocations of the event handler.

2. Nested Views or Nested States: If you have nested views or nested states, it is possible that the $stateChangeSuccess event is being triggered for each nested view or state transition. This can result in the event being hit multiple times, once for each nested view or state.

   For example, if you have a state configuration like this:

   javascriptCopy code
   $stateProvider
     .state('parentState', {
       url: '/parent',
       template: '<div ui-view></div>',
     })
     .state('parentState.childState', {
       url: '/child',
       template: '<h1>Child State</h1>',
       controller: 'ChildController',
     });
   

   When you transition to the parentState, the $stateChangeSuccess event will be triggered for the parent state as well as the child state, resulting in two invocations of the event handler.

3. Router Redirection or Resolving: If you have router redirections or resolving logic that triggers state changes, it might cause the $stateChangeSuccess event to be hit multiple times. Ensure that your resolving logic or redirections are not causing unexpected state transitions.

4. Global Event Listeners: Check if you have any global event listeners in your application that might be listening for $stateChangeSuccess events and triggering the handler multiple times.

To diagnose the issue further, you can add console logs or breakpoints in your event handler to see when and how many times it is being executed. Additionally, you can inspect the stack trace to understand the chain of events that lead to the $stateChangeSuccess event being triggered.

Remember that $stateChangeSuccess is a powerful event that can be used to perform actions after state transitions. However, excessive use of event listeners or complex state configurations can lead to unexpected behavior. Keep your code simple and modular, and make sure to clean up event listeners when they are no longer needed.