<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Third Party Scripts -->
<script data-require="lodash.js@1.0.1" data-semver="1.0.1" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.1/lodash.underscore.js"></script>
<script data-require="lodash.js@1.0.1" data-semver="1.0.1" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.1/lodash.js"></script>
<script data-require="lodash.js@1.0.1" data-semver="1.0.1" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.1/lodash.compat.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<!-- Application script -->
<script type="text/javascript" src="myController.js"></script>
<script src="script.js"></script>
<!-- Stylesheets -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="item in list">
<a ng-show="foo == false" ng-href="/foo/bar/">
<span tooltip="foo">{{item}}</span>
</a>
</li>
</ul>
<p>Last list length is: {{lastLength}}</p>
<p>Current list length is: {{list.length}}</p>
<p>List delta is: {{listDelta}}</p>
<p>Cache length is: {{cacheLength}}</p>
</div>
</body>
</html>
// ng-app
angular.module('myApp', ['ui.bootstrap']);
ul {
list-style-type: none;
}
var myController = function ($scope, $timeout) {
$timeout(function doStuff() {
$scope.lastLength = ($scope.list || []).length;
$scope.list = _.range(0, _.random(1000));
$scope.listDelta = $scope.list.length - $scope.lastLength;
$scope.cacheLength = Object.keys(angular.element.cache).length;
$timeout(doStuff, 5000);
}, 0);
};