Template not updating when controller property changes



I have a small issue with Ember about setting an array in my controller to update my template.

Basically, I load an array of object in my model that is display in the page, the user can click on item and this will trigger a function that receive the object that the user clicked on.

Its looks like something like this :

{{#each device in model.productList}}
    <div class="panel">
        <div >
            <a id="show{{unbound device.key}}" data-toggle="collapse" data-target="#{{unbound device.key}}" data-parent="#product-list-wrapper" href="" {{action 'selectDevice' device}}>

So my function selectDevice will receive the entire object of this specific item. My problem here is that I would like to load a gallery of images when the user click on product from the list.

selectDevice: function( device ) {
            this.set('selectedItem', device);
            this.loadGallery( device );

In device I have an array called images structure like this :

images = [ "url1", "url2", "url3", "url4" ];

My objectif was to replace every item inside this array by an object with a key and an url like this :

images = [ {key: "key1", url: "url1"}, {key: "key2", url: "url2"}, [...] ];

But I would like to refresh the controller property images per images using this function :

loadGallery: function( device ) {
    var that = this;
    var images = device.images.map( function( item, idx ) {
        return new Ember.RSVP.Promise(function( resolve ) {
            if ( item.url ) {
                resolve( item );
            else {
                resolve( that.imageStore.readImage( that, item) );
        .then( function( image ) {
            that.set('selectedItem.images.' + idx, image );
            return image;
    return Ember.RSVP.Promise.all( images);

readImage is returning this object that should replace the item in the array. selectedItem is a property of my controller that should display the information and the images of the selected product.

So far, its not working properly. To refresh the image on the page I have to do this manipulation :

  • Click on product1 : no images displayed
  • Click on product2 : no images displayed
  • Click again on product1 : images displayed !

I assume that is coming from the that.set('selectedItem.images.' + idx, image ); but I don’t understand how this can’t work.

Can you give me some help guys ?