Ember Property change is not getting registered

below is my code snippet and all of it is written in same ArrayController.

statusList: [
  {key: 'all', label: _('All')},
  {key: 'active', label: _('Active')},
  {key: 'deleted', label: _('Deleted')}
],

statusLabel: function(){
  var searchState = this.get('pagination.search_state');
  var status = this.get('statusList').findBy('key', searchState);
  return status && status.label || _('All');
}.property('pagination.search_state'),

pagination: function(){
  return this.store.metadataFor('xyz'); //xyz being my model name
}.property('model.@each.id'),

actions:{
  statusClicked: function(key){
    var statusList = this.get('statusList');
    var status = this.get('statusList').findBy('key', key);
    if(status){
      var params = this.searchParams();
      params.search_state = key;
      //function to get the data from server and refreshing pagination
    }
  }
}

and the associated template contains the following code

<div class="dropdown">
  <a {{bind-attr data-target="#"}} data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    {{statusLabel}}
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    {{#each status in statusList}}
      <li><a {{bind-attr href="#"}} {{action 'statusClicked' status.key}}>{{status.label}}</a></li>
    {{/each}}
  </ul>
</div>

my problem here is that even after the pagination is refreshed and thes search_state property is changed the statusLabel property is not registering the property change and not updating the template dynamically.

I know I can use notifyPropertyChange('pagination') as a work around but want to understand why the statusLabel property is not getting changed by itself, by observing the change in search_state attribute of pagination.