Bootstrap Modals to redirects me to a blank page

Question

The website that I've made works perfectly fine without a build system. However, I am currently having a problem with the bootstrap modals with the Yeoman: Angular + Gulp build system. Whenever I click on the list item the modal does not appear, it takes me straight to blank page. I haven't been able figure out the cause of this event.

At some point, the modals appeared to work without having to make any adjustments to the scripts. I restarted the grunt server again, and I was back to where I was. I don't understand why the modals don't appear and take me to blank page. Any ideas?

I was thinking this may had to do something with the Angular Routing, but I am not sure. I've already made some adjustments, and I am not receiving any sort of error message in the console. I need some advice on how to fix the problem. Any help will be appreciated.

The link to my code GitHub Repo

 angular.module('sanMiguelApp') .controller('Events',['$scope',function($scope){ $scope.eventname = [ {name:'Cinco De Mayo',date:'September',image: '../../images/cinco-de-mayo.jpg',number: 'first'}, {name:'River Fest',date:'September',image: '../../images/river-fest.jpg',number: 'second'}, {name:'School of Rock',date:'September',image: '../../images/school-of-rock.jpg',number: 'third'}, {name:'Golf Tournament',date:'September',image: '../../images/golf-tournament.jpg',number: 'fourth'}, {name:'20th Anniversary',date:'September',image: '../../images/anniversary.jpg',number: 'fifth'} ]; }]) .controller('TabController', ['$scope', function($scope) { $scope.tab = 1; $scope.setTab = function(newTab){ $scope.tab = newTab; }; $scope.isSet = function(tabNum){ return $scope.tab === tabNum; }; }]); 

 <div class="row"> <div class="col-md-5"> <img ng-src="images/student.jpg" class="img-responsive thumbnail" alt="San-Miguel-Building"> </div> <div class="col-md-7"> <div class = "motto text-center animated zoomIn">"Transforming lives throught education,commitment and love."</div> </div> </div> <div class="row"> <div class="col-sm-12 col-md-6"> <div class="thumbnail"> <img class = "img-responsive" style="height:100px" src="https://cdn1.iconfinder.com/data/icons/education-vol-2/48/074-512.png" alt="San Miguel"> <div class="caption"> <h3 class = "text-center">School Announcements</h3> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement"> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </div> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement"> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </div> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement"> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </div> </div> </div> </div> <div class="col-sm-12 col-md-4" ng-controller= "TabController"> <div class="thumbnail"> <img class = "img-responsive" style="height:100px" src="http://www.cogransystems.com/wp-content/uploads/2013/07/sports-icon.png" alt="..."> <div class="caption"> <h3 class = "text-center">Sports Schedule</h3> <ul class="nav nav-tabs"> <li role="presentation" ng-class="{active:isSet(1)}"> <a href ng-click="setTab(1)">Basketball</a> </li> <li role="presentation" ng-class="{active:isSet(2)}"> <a href ng-click="setTab(2)">Soccer</a> </li> <li role="presentation" ng-class="{active:isSet(3)}"> <a href ng-click="setTab(3)">Softball</a> </li> </ul> <table class="table" ng-show="isSet(1)"> <thead> <tr> <th>Date</th> <th>Opponent</th> <th>Basketball</th> </tr> </thead> <tbody> <tr> <th scope="row">3/12</th> <td>San Miguel</td> <td>@McKinley Park</td> </tr> <tr> <th scope="row">3/16</th> <td>San Miguel</td> <td>@McKinley Park</td> </tr> <tr> <th scope="row">3/19</th> <td>San Miguel</td> <td>@McKinley Park</td> </tr> </tbody> </table> <table class="table" ng-show="isSet(2)"> <thead> <tr> <th>Date</th> <th>Opponent</th> <th>Soccer</th> </tr> </thead> <tbody> <tr> <th scope="row">3/12</th> <td>San Miguel</td> <td>@McKinley Park</td> </tr> <tr> <th scope="row">3/16</th> <td>San Miguel</td> <td>@McKinley Park</td> </tr> <tr> <th scope="row">3/19</th> <td>San Miguel</td> <td>@McKinley Park</td> </tr> </tbody> </table> <table class="table" ng-show="isSet(3)"> <thead> <tr> <th>Date</th> <th>Opponent</th> <th>Softball</th> </tr> </thead> <tbody> <tr> <th scope="row">3/12</th> <td>San Miguel</td> <td>@McKinley Park</td> </tr> <tr> <th scope="row">3/16</th> <td>San Miguel</td> <td>@McKinley Park</td> </tr> <tr> <th scope="row">3/19</th> <td>San Miguel</td> <td>@McKinley Park</td> </tr> </tbody> </table> <!-- <div class="list-group text-center"> <a href="#" class="list-group-item"><i class="fa fa-male fa-2x fa-fw pull-left"></i> Basketball</a> <a href="#" class="list-group-item"><i class="fa fa-female fa-2x fa-fw pull-left"></i> Basketball</a> <a href="#" class="list-group-item"><i class="fa fa-male fa-2x fa-fw pull-left"></i>Soccer</a> <a href="#" class="list-group-item"><i class="fa fa-female fa-2x fa-fw pull-left"></i> Soccer</a> <a href="#" class="list-group-item"><i class="fa fa-male fa-2x fa-fw pull-left"></i> Softball</a> </div> --> </div> </div> </div> <div class="col-sm-12 col-md-2"> <div class="thumbnail" ng-controller ="Events"> <img class = "img-responsive" style="height:100px" src="http://ketchikanpubliclibrary.org/wp-content/uploads/2014/10/events-calendar-icon-300x300.png" alt="..."> <div class="caption"> <h3 class = "text-center">Events</h3> <div class="list-group text-center" ng-repeat = "events in eventname"> <a href="#" class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a> <div class="modal fade" id="{{events.number}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">{{events.name}}</h4> </div> <div class="modal-body"> <div class = "row"> <div class = "col-md-12"> <img style = "height:150px,width: 50px"class = "img-responsive" src ="{{events.image}}" </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> 

Answer 1

It probably has something to do with how you are injecting services into your various angular items. If you're not injecting with hard-coded strings at some point then minification is likely to break your app. I'd guess you know that already, but also that perhaps you missed one somewhere.

You can use syntax like:

function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

or

function PhoneListCtrl($scope, $http) {...}
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);

The first method is less popular, but generally more preferred in terms of best practices.

Answer 2

I luckily found the solution why the modals weren't popping up. I had to omit "href" attribute in my anchor element. Since, I programmed my routing to "#/" for any unknown pages. That is the reason why it was taking me to a blank page rather than popping the bootstrap modal. Lesson learned!

  <a href="#" class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a> <a class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a>