Using the angular-ui-router to navigate from ionic footers

Question

I am new to the concepts of ionic and angularjs , so I created a basic layout to navigate to pages from ionic footers. I am not able to navigate eventhough everything in my code seems to be fine. Can someone help me out?

As you can see, I have included 'ion-nav-view' tag in the index as well as the footer template:

index file :

  <ion-header-bar class="bar-stable">
      <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>

  <ion-nav-view> </ion-nav-view>

footer.view.html :

<ion-nav-view></ion-nav-view>

    <div class="tabs tabs-icon-top">
            <a class="tab-item">
                    <i class="icon ion-home" ui-sref="home"></i>
                        Home
            </a>
            <a class="tab-item">
                    <i class="icon ion-star" ui-sref="favorites"></i>
                        Favorites
            </a>
            <a class="tab-item">
                    <i class="icon ion-gear-a" ui-sref="settings"></i>
                        Settings
            </a>
    </div>

home.view.html

<h1>Home view</h1>

app.js

$stateProvider
  .state('footer', {
      url : '/footer',
      templateUrl : 'footer/footer.view.html'
  })
  .state('footer.home',{
     url : '/home',
     templateUrl : 'home/home.view.html'
  })
  .state('footer.settings',{
     url : '/settings',
     templateUrl : 'settings/settings.view.html'
  })
  .state('footer.favorites',{
    url :'/favorites',
    templateUrl : 'favorites/favorites.view.html'
  });
 
  $urlRouterProvider.otherwise('/footer/home');

Answer 1

Change Your state to

 .state('settings',{
     url : '/settings',
     templateUrl : 'settings/settings.view.html'
  })

and make sure the following thins

• your html file should be in settings folder and its name should be settings.view.html

Definitely it will work ...