For some reason, the ui.bootstrap dependency injection is causing all the content on my single page to disappear. There are no errors showing up in the console log, and I'm not sure why it's happening. I followed all the necessary steps, but I think I need another pair of eyes to help me identify the issue.
(function(){
'use strict';
angular.module('ghostApp',['ui.bootstrap'])
.controller('GamesCtrl',['$scope','$http',function($scope,$http){
$scope.currentPage = 1;
$scope.pageSize = 12;
$http.get("json/games.json").success(function(data){
$scope.games = data;
});
}]);
})();
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="ghostApp">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="navbar-brand" src="images/ghost.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll text-center">
<a href="#/home/">Home</a>
</li>
<li class="page-scroll text-center">
<a href="#/events/">Events</a>
</li>
<li class="page-scroll text-center">
<a href="#/games/">Games</a>
</li>
<li class="page-scroll text-center">
<a href="#/media/">Media</a>
</li>
<li class="page-scroll text-center">
<a href="#/about/">About</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid margin-content">
<div ng-view=""></div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/games.js"></script>
<!-- endbuild -->
</body>
</html>
<!---- games.html START --->
<input type="text" ng-model="searchGame" placeholder="Search for Game" >
<div class = "row" ng-controller = "GamesCtrl">
<div class = "col-xs-6 col-md-3 well" ng-repeat = "game in games | filter: searchGame">
<a href = "#" class = "thumbnail">
<img style="height:100px"ng-src = "{{game.image}}" alt="{{game.name}}">
</a>
<div class = "text-center">{{game.name}}</div>
</div>
<div class = "col-xs-12">
<pagination class = "pagination" total-items="games.length" ng-model="currentPage" items-per-page="pageSize"></pagination>
</div>
</div>
<!---- games.html END --->