Angular ui router - double-click to view to update as expected (with demo)

Question

I start with Angular and just understand the AngularUI Router perspective. I have one html page that contains a list of questions (each question needs its own URL) and a results page.

I created a quick stripped-down plunker (with all files) to demonstrate the problem:

http://plnkr.co/edit/QErnkddmWB0JgendbOiV?p=preview

For SO ref:

app.js

angular.module('foo', ['ui.router']) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/q1'); $stateProvider .state('question', { url: '/:questionID', templateUrl: 'questions.html', controller: 'questionsCtrl' }) .state('results', { url: '/results', templateUrl: 'results.html' }) }) .controller('questionsCtrl', function($scope, $stateParams) { $scope.questionID = $stateParams.questionID; $scope.scotches = [ { name: 'Macallan 12', price: 50 }, { name: 'Chivas Regal Royal Salute', price: 10000 } ]; }); 

Basically, for some unknown reason (to me), I have to double-click the " results " link, so that it appears in my eyes, it should appear on the first click.

Does anyone know why this is happening?

but.

Answer 1

What we have to do is reverse the definition state:

 .state('results', { url: '/results', templateUrl: 'results.html' }) .state('question', { url: '/:questionID', templateUrl: 'questions.html', controller: 'questionsCtrl' }) 

Why?

since the definition of the status of the question also covers /results as a parameter /:questionID

But overall, this is still confusing, so I would more distinguish the URL, for example. with the keyword /question

 .state('results', { url: '/results', }) .state('question', { url: '/question/:questionID', ... })