angular ui router - having to click twice for view to update as expected (with demo)

Question

I am a novice with Angular and just getting to grips with the AngularUI Router framework. I have one html page which contains a list of questions (each question needs its own url) and a results page.

I have created a quick stripped down plunker (with all files) to demo the issue:

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 click the 'results' link twice for it to appear in my eyes should appear on the first click.

Does anyone know why this is happening?

A.

Answer 1

What we should do is to reverse the state defintion:

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

The reason why?

because the question state definition is covering also the /results as a param /:questionID

But in general, this is still confusing, so I would distinguish the url more, e.g. with /question keyword

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