Ionic List不会在里面显示内容

Question

当我点击列表中新创建的项目时，单击后，我希望它们在h1上显示已添加到列表中的名称。我不确定出了什么问题，我认为我已经非常密切地关注了这个例子，但我不确定出现什么问题，或者为什么我在调用{{item}}时没有被识别出来我的templates / item.html脚本。

http://codepen.io/gnomeontherun/pen/EfKgJ

的index.html

<ion-nav-bar class="bar-dark">
    </ion-nav-bar>     
    <ion-nav-view></ion-nav-view>

  <script id="templates/tabs.html" type="text/ng-template">
    <!--NAV BAR CONTROLLER-->
      <ion-view view-title="Home">
      <div ng-controller="AppCtrl">

        <ion-side-menus>    

        <!--TOP NAV BAR-->
            <ion-nav-bar class="bar-dark">

            <ion-nav-back-button class="button-icon button-clear">
                <span class="icon ion-ios-arrow-left"></span>
            </ion-nav-back-button>

            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-plus-round" ng-click="modal.show()"></button>
            </ion-nav-buttons>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>       
            <ion-content class="has-header">

            </ion-nav-bar>

            <ion-side-menu-content>
            <br>
            <br>
            <ion-list>
            <ion-item ng-repeat="contact in contacts" href="#/item">{{contact.name}}</ion-item>
            </ion-list> 

        <!--TOP NAV BAR END-->



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

      </ion-side-menu-content>

        <!--SIDE MENU CONTENT--> 
        <ion-side-menu side="left">
            <ion-header-bar class="bar bar-header bar-dark">
            </ion-header-bar>
                <ion-content>

                    <ion-list>
                    <a class="item item-icon-left" href="#">
                        <i class="icon ion-ios-search"></i>
                            Search
                    </a>
                    </ion-list>

                    <ion-list>
                    <a class="item item-icon-left" href="#">
                        <i class="icon ion-email"></i>
                            Inbox
                    </a>
                    </ion-list>

                    <ion-list>
                    <a class="item item-icon-left" href="#">
                        <i class="icon ion-eye"></i>
                            Watching
                    </a>
                    </ion-list>

                    <ion-list>
                    <a class="item item-icon-left" href="#">
                        <i class="icon ion-person-stalker"></i>
                            Sellers
                    </a>
                    </ion-list>

                    <ion-list>
                    <a class="item item-icon-left" href="#">
                        <i class="icon ion-ios-cart"></i>
                            Cart
                        <span class="badge badge-assertive">0</span>
                    </a>
                    </ion-list>

                    <ion-list>
                    <a class="item item-icon-left" href="#/sign-in">
                        <i class="icon ion-log-out"></i>
                            Logout
                    </a>
                    </ion-list>
                </ion-content>
            </ion-side-menu>
            <!--END OF SIDE MENU CONTENT-->

        </ion-side-menus>
        </div>
    </ion-view>
    </script>


    <script id="templates/home.html" type="text/ng-template">
    <!--HOME PAGE-->
      <ion-view view-title="Home">  
      </ion-view>
    </script>

   <script id="templates/modal.html" type="text/ng-template">
   <!--ADD LISTING CONTROLLER-->
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-dark">
          <h1 class="title">For Sale</h1>
          <button class="button button-clear ion-close-round" ng-click="modal.hide()"></button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">Designer</span>
              <input ng-model="newUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Product</span>
              <input ng-model="newUser.lastName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Price</span>
              <input ng-model="newUser.email" type="text">
            </label>
            <button class="button button-full button-assertive" ng-click="createContact(newUser)">Create Listing</button>
          </div>
        </ion-content>
      </ion-modal-view>
    </script>

     <script id="templates/item.html" type="text/ng-template">
      <ion-view title="Listing">
        <ion-content>
          <h1>
          {{item}}
          CONTACT.NAME SUPPOSED TO BE HERE
          </h1>
        </ion-content>
      </ion-view>
    </script>

app.js

    angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
  $stateProvider
    .state('signin', {
      url: '/sign-in',
      templateUrl: 'templates/sign-in.html',
      controller: 'SignInCtrl'
    })
    .state('forgotpassword', {
      url: '/forgot-password',
      templateUrl: 'templates/forgot-password.html'
    })
    .state('tabs', {
      url: '/tab',
      abstract: true,
      templateUrl: 'templates/tabs.html'
    })
    .state('item', {
        url: '/item',
        controller: 'ItemCtrl',
        templateUrl: 'templates/item.html'
    })
    .state('tabs.home', {
      url: '/home',
      views: {
        'home-tab': {
          templateUrl: 'templates/home.html',
          controller: 'HomeTabCtrl'
        }
      }
    });


   $urlRouterProvider.otherwise('/sign-in');

})

.controller('SignInCtrl', function($scope, $state) {
  "use strict";
  $scope.signIn = function(user) {
    console.log('Sign-In', user);
    $state.go('tabs.home');
  };

})

.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate) {
    "use strict";
  console.log('HomeTabCtrl');
   $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };

})


.controller('AppCtrl', function($scope, $ionicModal) {
  "use strict";
  $scope.contacts = [
    { name: 'Mike Freeman' },
    { name: 'Barney Calhoun' },
    { name: 'Lamarr the Headcrab' },
  ];

  $ionicModal.fromTemplateUrl('templates/modal.html', {
    animation: 'slide-in-up',
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.openModal = function () {
      $scope.modal.show();
  };

  $scope.form = {};

  $scope.createContact = function(u) {        
    $scope.contacts.push({ name: u.firstName + ': ' + u.lastName + '  $' + u.email });
    $scope.modal.hide();
  };

  $scope.$on('$destroy', function() {
      $scope.modal.remove();
  });

})

.controller('ItemCtrl', function($scope, $stateParams) {
    "use strict";
    $scope.item = $stateParams.item;
});