Untitled

<html>
<head>
    <title>hide & show</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script type="text/javascript">
        function HideShowCtrl ($scope)
        {
            $scope.boxes =
            [
                {color:"green"},
                {color:"red"},
                {color:"blue"},
                {color:"yellow"},
                {color:"purple"},
                {color:"orange"},
                {color:"brown"}
            ];
            $scope.disableAll = function ()
            {
                $scope.boxes.forEach(function(b){b.hidden = true})
            }
        }
    </script>

</head>
<body ng-app ng-controller="HideShowCtrl">

show buttons:
<input ng-repeat="box in boxes"
       value="{{box.color}}"
       ng-click="box.hidden = false"
       ng-disabled="!box.hidden"
       type="button">
|
<input type="button"
       value="hide all"
       name="hide all"
       ng-click="disableAll()">

<br><hr>

<div ng-repeat="box in boxes"
     style="background-color:{{box.color}};
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 5px;
            display: {{box.hidden && 'none'|| 'inline-block'}}"
     ng-click="box.hidden = true"
     >
    Click to hide.
</div>

</body>
</html>