Angular ui-router state doesn't change to home state on click of navbar icon

Question

I am using ui-router to navigate between pages using states. I have created tabs using states in different page called tabs.html. On changing state from home to mainTab i can successfully move to MainTab page and select the first tab(mainTab.tab1). But when i click the navbar icon to goto home page using $state.go(home), the state changes to the third tab( mainTab.tab3) and upon clicking the navbar again the state then changes to home.

How can this be avoided ?

Following is the code for the issue .

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '',                       
        controller: ''
    })
    .state('mainTab', {
        url: '/mainTab',
        templateUrl: '',                       
        controller: '',
    })  
    .state("mainTab.tab1", {
        url:"mainTab/tab1",
        templateUrl: "",    
        controller: '',
    })
    .state("mainTab.tab2", {
        url:"mainTab/tab2",
        templateUrl: "",
        controller: '',
    })
    .state("mainTab.tab3", {
        url:"mainTab/tab3",
        templateUrl: "",
        controller: '',
    });
    $urlRouterProvider.otherwise('home');

});

This is how tabs are created :

$scope.tabs= [
  {
    heading: 'Tab1',
    route:   'mainTab.tab1',
    active:false
  },
  {
    heading: 'Tab2',
    route:   'mainTab.tab2',
    active:false
  },
  {
    heading: 'Tab3',
    route:   'mainTab.tab3',
    active:false
  }
];

tabs.html

<div id="wrapper">
<div id="page-wrapper">
    <div class="row">
        <div class="col-md-12">          
            <tabset>
                <tab
                    ng-repeat="t in tabs"
                    heading="{{t.heading}}"
                    select="goTo(t.route)"
                    active="t.active"
                    >
                </tab>
            </tabset>
            <div ui-view></div>
        </div>
    </div>
</div>

goTo() function is like this

$scope.goTo = function(route){ $state.go(route); }

Any inputs greatly appreciated. Thanks

Answer 1

try this, because when you are creating the route, its look like mainTab/mainTab/tab1. It takes parent state URL also.

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '',
        controller: ''
    })
    .state('mainTab', {
        url: '/mainTab',
        templateUrl: '',
        controller: '',
    })
    .state("mainTab.tab1", {
        url: "/tab1",
        templateUrl: "",
        controller: '',
    })
    .state("mainTab.tab2", {
        url: "/tab2",
        templateUrl: "",
        controller: '',
    })
    .state("mainTab.tab3", {
        url: "/tab3",
        templateUrl: "",
        controller: '',
    });