url change not triggering state change with angular ui router

I'm using angular ui router to create a home route like this

routes.$inject = ['$stateProvider'];

export default function routes($stateProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      template: require('./home.html'),
      controller: 'HomeController',
      controllerAs: 'home'
    })

In the HomeController, I'm importing a service that provides a stream of blog posts. Thus, in the ./home.html template, I am iterating through the array of posts like this, creating links for each post

 <span ng-repeat="post in home.posts">

         <a ui-sref="home.detail({postId:post.id})">{{post.title.rendered}}</a>

    </span>

As you can see from the link, I'm expecting a click of the link to be handled by home.detail state. In the router, I do this, expecting each post to have a url (when I click the links) something like http://localhost:8888/1 or http://localhost:8888/4. However, when I click the links, the url changes but the ./post.html template doesn't load and the log statement in the controller code below doesn't run. There are no errors in the console.

Question: why is the router code to handle the click of the individual links (to load the new template, to log the stateParams) not running when I click the links to the posts (yet the url changes)?

  $stateProvider
    .state('home', {
      url: '/',
      template: require('./home.html'),
      controller: 'HomeController',
      controllerAs: 'home'
    })
   .state('home.detail', {


        url: '{postId:[0-9]{1,4}}',
        template: require('./post.html'),
        controller: ['$scope', '$stateParams',
            function (  $scope,   $stateParams) {
                console.log($scope, "$scope", $stateParams, "$stateParams");
                $scope.post = $stateParams;

            }],