change controller property from another controller

I have an application that has a Navigation bar that I have put in "Application" context. By default, these Navigation bar links will be disabled and will be enabled only on a particular action from template.

The Application controller that contains the disabled status of the link in Nav Bar:-

App.ApplicationController = Ember.Controller.extend({
userName:"TestUser",
firstLinkDisabled:true,
actions:{
    handleToggle:function(){
        console.log("Handling application action with linkstatus="+this.firstLinkDisabled);
        //this.set("firstLinkDisabled",false);
        this.toggleProperty("firstLinkDisabled");
    }
}

})

The Index Controller that will send the action to Application Controller:-

App.IndexController = Ember.Controller.extend({
actions:{
    toggleApplicationButton:function(){
        this.controllerFor("Application").send("handleToggle");
    }
}

})

Application Template:

    <script type="text/x-handlebars">
    

    {{#link-to 'first' disabled=firstLinkDisabled}}First link in application{{/link-to}}

    <button {{action 'handleToggle'}}>Toggle Application Menu </button>
    
    {{outlet}}
    </script>

Index Template

<script type="text/x-handlebars" id="index">
<button {{action 'toggleApplicationButton'}}>Toggle Application Menu </button>
</script>

When I click on "Toggle Application Menu" button I get the following output in console.

Console Output

But in Ember inspector the property "firstLinkDisabled" doesn't change. Image of Ember Inspector:- Ember Inspector Image

The link remains disabled.

What am I doing wrong here?
Doesn't ember allow to change the property of other controller?
How to make this thing work?