# Template not updating when controller property changes

**URL:** https://discuss.emberjs.com/t/template-not-updating-when-controller-property-changes/5708
**Category:** Uncategorized
**Created:** [June 19, 2014, 10:43am UTC](https://discuss.emberjs.com/t/template-not-updating-when-controller-property-changes/5708 "2014-06-19T10:43:50Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![SuperMarco](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@SuperMarco](https://discuss.emberjs.com/u/SuperMarco)
#### Post date: [June 19, 2014, 10:43am UTC](https://discuss.emberjs.com/t/template-not-updating-when-controller-property-changes/5708/1 "2014-06-19T10:43:50Z")

</div>

Hi,

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}}>
            </a>
        </div>
    </div>
{{/each}} 

```

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 ?