Ember Binding Component Template to Models

Hi I have the following Component Template:

test-component.hbs: (produces img tag per model)

{{#each titleModels}}
<div class="item">
    <img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>
</div>
{{/each}}

Its used in parent template

parent.hbs:
{{test-component action="titleClicked" parentController=controller titleModels=model}}

On titleClicked action it is suppose to remove the clickedModel and refresh the template to show the removed view.

parent-controller.js:
   modelChanged: false,
   actions: {
        titleClicked: function(){
           self.get('model').removeObject(aSelectedModel);
           self.set('modelChanged',true);
         }
   }

The test-component observes changes to titlesModel and rerenders the template:

test-component.js:

titleModelsChanged: function(){
   this.rerender();
 }.observes('parentController.modelChanged'),

this.rerender methos is called successfully and the specific html tag (e.g the one defined below) for the removed model is no longer present in the DOM for html page generated from test-component.hbs as expected.

 <img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>

The img tags for the remaining models are present when inspecting the dom. However they are not displayed out the actual html page ( i dont see the actual imgs), even though the are present in the DOM when I inspect the elements.

How do I displays the img tags of the remaining models after rerender on the html page ?