Angular ui router goes to previous state

Question

I have a problem when in a certain scenario the state transition will happen twice. I have an application that contains several SPA. I use MVC routing to serve each SPA and, using each SPA, I use angular ui router to handle routing.

The figure below shows a drop-down menu where each item in the drop-down list is a link to a different SPA

The image below shows the tabs shown when you click on the SPA link.

The problem I am facing relates to the following steps.

• Download SPA. This will lead you to the first tab.
• Click on any other tab, and this will lead you to the view defined on this tab.
• Click on the link to the same SPA from the drop-down menu. This will return you to the first tab.
• . . ui-router , , , .

.

:

angular.module('settings').config(routeConfig);

routeConfig.$inject = ["$stateProvider", "$urlRouterProvider"];
function routeConfig($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.when('', 'Tab1');

    $stateProvider.state('Tab1',
    {
        url: '/Tab1',
        templateUrl: '/link/To/template.html',
        controller: 'tab1controller as ctrl'
    });

    $stateProvider.state('Tab2',
    {
        url: '/Tab2',
        templateUrl: '/link/To/template.html',
        controller: 'tab2controller as ctrl'
    });
    $stateProvider.state('Tab3',
    {
        url: '/Tab3',
        templateUrl: '/link/To/template.html',
        controller: 'tab3controller as ctrl'
    });

HTML:

<li role="presentation"><a role="tab" ui-sref="Tab1" ui-sref-active="tab-title-active">Tab 1</a></li>
<li role="presentation"><a role="tab" ui-sref="Tab2" ui-sref-active="tab-title-active">Tab 2</a></li>
<li role="presentation"><a role="tab" ui-sref="Tab3" ui-sref-active="tab-title-active">Tab 3</a></li>

$stateChangeStart , 4 Tab3, - Tab1. , , , , ui-sref-active .

, $stateChangeStart, $state.go $state.transitionTo .