Angularjs routing using $state gotten raw html tags

I used below code and gotten raw html for the result. I'm seeing expression of {{welcome}} etc. I guess I'd done wrong somewhere and caused it failed to render. But 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>

In your code, i see there's no controller declaration.

You must define a controller, in order to enable angular to resolve the placeholders.

Try :

    <script type="text/javascript">
        var myapp = angular.module("myapp", []);

        myapp.controller("indexController", function($scope) {
            $scope.name = "test";
            $scope.age = 123;
        });
    </script>

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

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