View and view Angularjs in depth

Question

This is my main scenario. For a list of items (a summary overview), I want to show a detailed view of the item that was clicked on the same page.

I took this jsfiddle example and converted it to this jsfiddle . If you look at the behavior, this works for the first time, but it is incompatible.

Can someone help me with this or suggest a better approach. I would like to have another controller to manage the list and another controller to handle the detailed view.

Answer 1

One way to convert the example (assuming you want to use ngSwitch):

<ul ng-controller="ListController"> <li ng-repeat="item in items" ng-controller="ItemController"> <div ng-click="open(item)">{{item.content}}</div> </li> <hr> <ng-switch on="anyItemOpen()"> <div ng-switch-when="true"> <div ng-controller="ItemController"> {{opened.name}}: overlay: tweet, share, pin </div> <a ng-click="close()">close</a> </div> </ng-switch> </ul> 

And here is the working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/sJdzt/4/

Your jsFiddle did not work, as you tried to reference the item created in the ngRepeat scope (and therefore not available outside of ngRepeat).