Ember template not updating on changing properties

I have an Ember template which shows 5 divs by default. I have the template configured as follows-

<img class="col-lg-1  scroll-img" src="imgs/left_scroll_arrow.png" {{action 'active-credit-left-scroll'}}/>

    {{#each activebrand in limitedContent}}
               //HTML content
    {{#each activebrand in limitedContent}}




 <img class="col-lg-1 scroll-img scroll-right" src="imgs/right_scroll_arrow.png" {{action 'active-credit-right-scroll'}}/>

I am populating the template via my controller as follows:

export default Ember.Controller.extend({


    'activecreditstartVal':0,
     'activecreditendVal':5,
    actions:{

      'active-credit-left-scroll':function(){
         if(this.get('activecreditstartVal')>0){
           this.set('activecreditstartVal',this.get('activecreditstartVal')-1);
           this.set('activecreditendVal',this.get('activecreditendVal')-1);
         }
    },
     'active-credit-right-scroll':function(){
    this.set('activecreditstartVal',this.get('activecreditstartVal')+1);
        this.set('activecreditendVal',this.get('activecreditendVal')+1);


      },

    },
      limitedContent: function(){
        return this.get('model.firstObject.activebrands').slice(this.get('activecreditstartVal'),this.get('activecreditendVal'));
      }.property('model.firstObject.activebrands')


    });

Initially the filtering mechanism works and only records 0-5 are displayed, however on click of right scroll button I want to display records 1-6 . I checked that the values of activecreditStartVal and activecreditendVal are getting updated however the template is not getting updated.

What am I doing wrong? Thanks