angular: The router can't load child components with complete binding on the first click

I followed this angular2 article and the example to create a router in my app. But in my example, I have a child component in CrisisListComponent.

The code is below:

Bootstrap:

import { bootstrap } from 'angular2/platform/browser'
import { provide } from 'angular2/core'
import { AppComponent } from './appcomponent'
import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from 'angular2/router';

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy }) ]);

AppComponent:

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import { VotingApplication } from './components/voting/votingapp';
import { VotingResultsComponent} from './components/votingresults/votingresults';

@Component({
    selector: 'app',
    templateUrl: './app/appcomponent.html',
    providers: [],
    directives: [VotingApplication, VotingResultsComponent, ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: '/vote', component : VotingApplication, name: 'Vote' },
    { path: '/results', name: 'Results', component: VotingResultsComponent }
])
export class AppComponent {

}

VotingApplication:

import { Component, OnInit } from 'angular2/core';
import { VotingComponent } from './votingcomponent'
import { VoteForPerson } from './voteforperson'

@Component({
    selector: 'voting-app',
    templateUrl: './app/components/voting/votingapp.html',
    directives: [VotingComponent, VoteForPerson, FooterComponent]
})
export class VotingApplication implements OnInit {

    ngOnInit() {
    }
}

VotingComponent:

import { Component, Input, OnInit } from 'angular2/core';

@Component({
    selector: 'voting-component',
    templateUrl: './app/components/voting/votingcomponent.html'
})
export class VotingComponent implements OnInit {

    @Input()
    public title: string;

    ngOnInit() {
    }
}

VotingPerson:

import { Component, Input, OnInit } from 'angular2/core';

@Component({
    selector: 'vote-for-person',
    templateUrl: './app/components/voting/voteforperson.html'
})
export class VoteForPerson implements OnInit {

    @Input()
    public name: string;

    @Input()
    public picture: string;

    ngOnInit() {
    }
}

VotingComponent.html

<div class="col-md-12" style="text-align: center">
    <h1>{{title}}</h1>
</div>
<ng-content></ng-content>

VotingApp.html

<voting-component title="A Vs B" class="row">
    <vote-for-person name="A" picture="../../images/a.png" class="col-md-6">
About A
    </vote-for-person>
    <vote-for-person name="B" picture="../../images/b.png" class="col-md-6">
        About B
    </vote-for-person>
</voting-component>

When I click the Vote router link (in appcomponent), the VotingApp loads and it’s children also but the binding for {{title}} does not happen. If I click the Vote link again, I can see the binding for {{title}} happens and see the title.

I looked at the components being loaded by system.js, and see all the components being loaded. But somehow the child component does not render on the first click on the router link. It happens second time.

A similar problem is described here on stack overflow.