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