Ember JS unable to access sliced value to computed Array in template

I am facing a very weird problem. I created an array in my conroller as

    'brandsSelectedForTrade':Ember.ArrayController.create(),

    //populating array 
    actions:{
  'addBrandToTrade':function(brand){
       this.get('brandsSelectedForTrade').addObject(brand);
        console.log(this.get('brandsSelectedForTrade'));
    var test=this.get('brandsSelectedForTrade').slice(0,3);
      //  console.log(this.get('brandsSelectedForTrade').slice(0,3));
      test.forEach(function(val){
         console.log(val.get('Brandname'));
      });
},

//Returning array to view
  tradeDropDownSelectedBrands:function(){
    // console.log(this.get('brandSelectedForTrade'));
     var retVal= this.get('brandsSelectedForTrade').slice(0,3);
   // var returnContent={'brandsSelectedForTrade':retVal};
    return retVal;


  }.property('brandsSelectedForTrade','brandlistingStartVal','brandlistingEndVal')

In my template I am accessing the array as

{{#each brand in tradeDropDownSelectedBrands}}
    //Do something
{{/each}}

If I am passing the unsliced array I am able to access the properties but somehow if I try to access the sliced array it is null in the template. Any Idea what I am doing wrong? If I am correct Ember.ArrayController.create() has the slice() method. And doing a console.log of the sliced array does show an array of classes