ui-bootstrap dependency inside app.module is not working - angularjs

Question

I have looked at this question on stackoverflow and followed all the answers, but still i can not get ui-bootstrap to work. I have downloaded angular-ui via bouwer and included in my index.html, after tried to inject it in app module, but then the app breaks.
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="app.js"></script>
and in app.js
angular.module("qanda",['ui-bootstrap'])
.controller('mainCtrl',['$scope','$http',function($scope,$http){
$scope.testList = [];
Github: https://github.com/khanharis87/quizz_game

Answer 1

You should use the angular version which goes with the bootstrap one,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
<script src="app.js"></script>

Answer 2

You are writing the module name wrong. It should be 'ui.bootstrap'. So the module should be like this:
angular.module('qanda', ['ui.bootstrap'])
And be sure that you include bootstrap css files, but not js files. Use angular-ui directives.

Answer 3

Just in case, when you are installing the bootstrap-ui from bower make sure to use --save at your main folder like so
bower install angular-bootstrap --save
if you use bower's "--save" you wouldn't need to add in the css or script tags in the header or at the end of the body yourself .. bower does it automatically (and correctly) for you.