ionic routing , not working

i am new to ionic and i;m trying to work on a application and i am stuck at routing between pages through tab ... Unable to understand how the control goes into $stateProvider .state({ ... }) and running into a strange problem .

app.js

angular.module('LetsChat', ['ionic'])

...

.config(function($stateProvider,$urlRouterProvider){

$stateProvider

    .state('tab',{
        url:'/tab',
        abstract:true,
        templateUrl:"app/tabs.html"
    })

    .state('tab.contact', {
        url:"/contact",
        views:{
            'tab-contact':{
                templateUrl:"app/contact/contact.html"
            }
        }
    })
    
    .state('chat-list', {
        url:"/chat-list",
        views:{
            'tab-chat-list':{
                templateUrl:"app/chat-list/chat-list.html"
            }
        }
    })

    $urlRouterProvider.otherwise('/tab');
});
Index.html

<body ng-app="LetsChat">

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

tabs.html

<ion-tabs class="tabs-icon-top">


  <!-- contact Tab -->
  <ion-tab title="Contact" icon="icon ion-ios7-person" href="#/tab/contact">
    <ion-nav-view name="tab-contact"></ion-nav-view>
  </ion-tab>


  <!-- chat-list Tab -->
  <ion-tab title="chat list" icon="icon ion-android-forums" href="#/tab/chat-list">
    <ion-nav-view name="tab-chat-list"></ion-nav-view>
  </ion-tab>


</ion-tabs>

contact.html

<ion-view title="contact">
  <ion-content class="padding">
    <h1>contact</h1>
  </ion-content>
</ion-view>

chat-list.html

<ion-view title="chat-list">
  <ion-content class="padding">
    <h1>chat list</h1>
  </ion-content>
</ion-view>

i tried and kept trying i din't understand where i'm going wrong problem: on clicking the tab , its not going into their respective tab instead its staying in index page , even when i externally specify the URL the page stays in the index page and the tabs animation works bt does not performs any operation . also please suggest how to debug and check for proper working in browser with the ionic app . please help .

May be this will help you... You have to put your view name same

tabs.html

<ion-tabs class="tabs-icon-top">
    <!-- contact Tab -->
    <ion-tab title="Contact" icon="icon ion-ios7-person" href="#/tab/contact">
        <ion-nav-view name="tab-contact"></ion-nav-view>
    </ion-tab>
    <!-- chat-list Tab -->
    <ion-tab title="chat list" icon="icon ion-android-forums" href="#/tab/chat-list">
        <ion-nav-view name="tab-chat-list"></ion-nav-view>
    </ion-tab>
</ion-tabs>

contact.html

<ion-view title="tab-contact">
    <ion-content class="padding">
        <h1>contact</h1>
    </ion-content>
</ion-view>

chat-list.html

<ion-view title="tab-chat-list">
    <ion-content class="padding">
        <h1>chat list</h1>
    </ion-content>
</ion-view>