url change not triggering state change with angular ui router - angularjs

Question

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;
}],

Answer 1

Your parent state needs a ui-view. From ui-router's documentation
Child states will load their templates into their parent's ui-view.