Unable to navigate to next paget

ionic-v1
1

Hi all,

I am new to ionic framework. I have a problem with navigating pages. Here how it goes:
I have created a tab-daily.html which will display a list of items using collection-repeat. For each items, the item can be clicked to navigate to the next page. The thing is that I am able to click on the item and the url changes from http://localhost:8100/#/tab/daily to http://localhost:8100/#/tab/item/0. However, the page does not change to tab-item.html. Did I miss out anything here?
This is the source code.

tab-daily.html

<ion-view title="Dashboard">
  <ion-content>
    <h1 class="title">Ionic Infinite Scroll with {{items.length}} items</h1>
    <div class="item item-avatar my-image-item"
      collection-repeat="item in items | orderBy:'-createdTime':true"
      collection-item-width="'33%'"
      collection-item-height="'33%'">
      <a href="#/tab/item/{{$index}}">
        <img ng-src="{{item.picture}}">
      </a>
    </div>

    <ion-infinite-scroll
      ng-if="!moredata"
      icon="ion-loading-c"
      on-infinite="loadMore()"
      distance="25%">
    </ion-infinite-scroll>

  </ion-content>
</ion-view>

the next page to be navigated should be tab-item.html. This is the source code.
tab-item.html

<ion-view>
  <ion-content>
    <div class="list card">
      <div class="item item-body">
        <img class="full-image" src="{{item.picture}}">
        <p>
          <a href="#" class="subdued">1 Like</a>
          <a href="#" class="subdued">5 Comments</a>
        </p>
      </div>

      <div class="item tabs tabs-secondary tabs-icon-left">
        <a class="tab-item" href="#">
          <i class="icon ion-thumbsup"></i>
          Like
        </a>
        <a class="tab-item" href="#">
          <i class="icon ion-chatbox"></i>
          Comment
        </a>
        <a class="tab-item" href="#">
          <i class="icon ion-share"></i>
          Share
        </a>
      </div>
    </div>
  </ion-content>
</ion-view>

This is the app.js.

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    Parse.initialize(“KEY”,”KEY”);
  });
})
.config(function($stateProvider, $urlRouterProvider) {


  // Each state's controller can be found in controllers.js
  $stateProvider
    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    // Each tab has its own nav history stack:

    .state('tab.daily', {
      url: '/daily',
      views: {
        'tab-daily': {
          templateUrl: 'templates/tab-daily.html',
          controller: 'DailyCtrl'
        }
      }
    })
    .state('tab.favourite', {
      url: '/favourite',
      views: {
        'tab-favourite': {
          templateUrl: 'templates/tab-favourite.html',
          controller: 'FavouriteCtrl'
        }
      }
    })
    .state('tab.item', {
      url: '/item/:itemId',
      views: {
        'tab-item': {
          templateUrl: 'templates/tab-item.html',
          controller: ‘ItemCtrl'
        }
      }
    })

    .state('tab.account', {
      url: '/account',
      views: {
        'tab-account': {
          templateUrl: 'templates/tab-account.html',
          controller: 'AccountCtrl'
        }
      }
    })
    ;

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/daily');
});