I have a ng-repeat which display a list of divs and when I click on one it shows an aditionnal div for the clicked item.

This is working

<div ng-repeat=item in items>



    <div ng-click=showfull = !showfull>

        <div>

            <h1>{{item.title}}</h1>

            <p>{{item.content}}</p>

        </div>

    </div>

    <div ng-show=showfull>

        <p>{{item.info}}</p>

    </div>

    <hr/>

</div>

My items are loaded from a json containing a list of item and each item have a default attribut showfull set to false in this json. This is working, but now I want to hide all others item in the list when an item is clicked. I've tryied something like this :

This is not working

<div ng-repeat=item in items>



    <div ng-click=expand(item)>

        <div>

            <h1>{{item.title}}</h1>

            <p>{{item.content}}</p>

        </div>

    </div>

    <div ng-show=showfull>

        <p>{{item.info}}</p>

    </div>

    <hr/>

</div>

and in the controller I've added a function :

$scope.expand = function(e) {

    e.showfull = !e.showfull;

    //TODO: put here a foreach logic to hide all other items

}

But even without the foreach logic this is not working, the item don't show the additionnal div when clicked. I have two question :

1. I suppose this is due to item being passed by copy in the expand function or some kind of scope isolation issue but can you explain me why in detail ?
   SOLVED




2. How can I hide all the additional div of other items when I click an item and show the additionnal content for this item ? Do I need to do a directive ?
   NOT SOLVED

Thanks