Not able to make the navbar items dynamic in emebr

I have navbar component which I have placed in an application.hbs so that it should be visible always.But I want to change the title of the navbar with each page I visit ( say I am on index page it should say "Home" , if I am on profile page it should say profile,etc).Right now what is happening is navbar title always remains "Home" for all the page.This is happening because the navbar gets rendered onlu during the time it loads the page in browser and after that it doesn't change according to page.

application.hbs

{{top-navbar dp_url=model.profile.dp_url first_name=model.profile.first_name title=title}}

{{outlet}}

Here the I am computing the value of title depending upon which page the user is.

application.js(controller)

if (currentPage === "" || currentPage === "#"){
      currentState.set('title',"Home")
 }
else if(currentPage === "Userprofile"){
      console.log('myStudio');
      currentState.set('title',"UserProfile");
}

In here the currentpage has the current url of app and I am comparing it and deciding the value of title for navbar.

But the top-navbar title value gets calculated only for the first time when user load the app in browser and not when I move ffrom one route to another.

I have also tried the Ember.Evented but not able to solve it.