I'm having trouble with the Angular Search box not working when I try to run it locally on my computer. The same code works perfectly fine on platforms like codepen, plunker, and jsfiddle. Can someone help me figure out what's going wrong?
.example-animate-container {
background:white;
border:5px solid red;
list-style:none;
margin:0;
padding:0 10px;
}
.animate-repeat {
line-height:40px;
list-style:none;
box-sizing:border-box;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity:0;
max-height:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
max-height:40px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Example - example-example89-production</title>
<link href="animations.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular-animate.js"><:/script>
</head>
<body ng-app="ngAnimate">
<div ng-init="buildings = [
{name:'Carver-Hawkeye Arena', location:'1 Elliott Drive Iowa City, IA', facility:'athletics', initials:'CHA'},
{name:'Ronald McDonald House', location:'730 Hawkins Drive Iowa City, IA', facility:'athletics', initials:'RMCD'}]">
You have {{buildings.length}} buildings. Search:
<input type="search" ng-model="q" placeholder="filter buildings..." />
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="building in buildings | filter:q as results">
[{{$index + 1}}] <strong>Building:</strong>{{building.name}} <strong>Location:</strong> {{building.location}}.
</li>
<li class="animate-repeat" ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
<li class="animate-repeat" ng-if="results.length == 555">
<strong>No results found...</strong>
</li>
</ul>
</div>
</body>
</html>