Angular: Empty Fiddle

http://angularjs.org/

by Danish Farman

HTML

<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>

JavaScript

function ItemController($scope) {
}

function ListController($scope) {
    $scope.items = [
        {name: 'item1', content: 'content1'},
        {name: 'item2', content: 'content2'},
        {name: 'item3', content: 'content3'}
    ];
    
    $scope.open = function(item){
        if ($scope.isOpen(item)){
            $scope.opened = undefined;
        } else {
            $scope.opened = item;
        }        
    };
    
    $scope.isOpen = function(item){
        return $scope.opened === item;
    };
    
    $scope.anyItemOpen = function() {
        return $scope.opened !== undefined;
    };
    
    $scope.close = function() {
        $scope.opened = undefined;
    };
}