Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<h2>Hide UL:</h2>
<ul ng-init="visible = true" ng-show="visible">
<li ng-repeat="suggestion in results" ng-click="$parent.visible = false">
{{suggestion}}
</li>
</ul>
</div>
<div ng-controller="MyCtrl2">
<h2>Hide each LI:</h2>
<ul ng-init="visible = true">
<li ng-show="visible" ng-repeat="suggestion in results" ng-click="visible = false">
{{suggestion}}
</li>
</ul>
</div>
CSS
li {
padding: 10px;
cursor: pointer;
background: #eee;
}
li:hover {
background: #ddd;
}
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.results = [1, 2, 3, 4];
}
function MyCtrl2($scope) {
$scope.results = [1, 2, 3, 4];
}