routing using $state failed in Angularjs

I used below code and gotten blank for the result. But when I check the result the markup are there, seeing expression of {{welcome}} etc.. I guess I'd done wrong somewhere and it failed to render. I didn't see any error in console of Chrome.

my app.js

app.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
      .state('threadListing', {
        url: '/', 
        templateUrl: 'threadListing.html',
          controller: 'AppCtrl'
      })

          .state('threadDetail.php', { 
              url: '/threadDetail', 
              templateUrl: 'threadDetail.html',
              controller: 'AppCtrl'
            })

      $urlRouterProvider.otherwise("/");
})

my html is like this

<ion-content>

<script id="threadListing.html" type="text/ng-template">
<ion-view>
<h1>Welcome {{name}}</h1>
    </ion-view>
  </script>

    <script id="threadDetail.html" type="text/ng-template">
    <ion-view>
      <h2>{{age}}</h2>
    </ion-view>
    </script>

</ion-content>