We Keep Coding

Laravel using ajax get records from controller

Am trying to get data from controller and append to "tbody" using Ajax, yet am getting blank page.
Controller:
public function getRecordsMD(){
$filedata = File::where('uploaded_by', '=', auth()->user()->username)->get();
return response()->json([
'filedata'=>$filedata,
]);
}
Route:
Route::get('/manage_document',[utemfilesharing::class, 'getRecordsMD']);
Ajax/Jquery:
$(document).ready(function () {
getRecordsMD();
//Get all records
function getRecordsMD() {
$.ajax({
type:'GET',
url: '/manage_document',
dataType: "json",
success: function(data){
console.log(data.filedata);
$.each(data.filedata, function (key, item) {
$('tbody').append('<tr>\
<td>'+item.id+'</td>\
<td>'+item.name+'</td>\
<td>'+item.faculity_name+'</td>\
<td>'+item.document_type+'</td>\
<td>'+item.subject_name+'</td>\
<td>'+item.description+'</td>\
<td>\
<button type="button" id="editFiles" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#edit-model" data-id="'+item.id+'"><i class="fas fa-edit"></i></button>\
<button type="button" id="deleteFiles" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#delete-model" data-id="'+item.id+'"><i class="fas fa-trash"></i></button>\
</td>\
</tr>');
});
},
error: function (data) {
console.log('Error:', data);
}
});
}
});
View:
<!-- Manage Document -->
<div class="col-xl-12 col-md-6 mb-4">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Manage Document</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="alert alert-success" role="alert" id="successMsg" style="display: none" >
File Updated successfully!
</div>
<div class="alert alert-danger" role="alert" id="successDMsg" style="display: none" >
File Delete successfully!
</div>
<table id="manageDocument" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>File Name</th>
<th>Faculity Name</th>
<th>Document Type</th>
<th>Subject Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="{{asset('vendor\bootstrap\js\bootstrap5-1-3.bundle.min.js')}}"></script>
<script src="{{asset('vendor\jquery\jquery.min.js')}}"></script>
<script src="{{asset('js\Models.js')}}"></script>
It seems like am missing something I don't know what its. whenever I navigate to /manage_document I get a blank page where it suppose display the table. will be glad if you help.

how to change the bind grid view in separately

I created one grid view to get the database table details,
here, when I click the Next Sync button it will pop up this box and I can choose the date and time,
but the problem is when I clicked any Next Sync button only change the first DateTime only,
this is the code of the table grid view
<table class="table table-striped border-bottom">
<thead>
<tr>
<th>Select to Sync.</th>
<th class="sorting">Source</th>
<th>Last Sync. Date</th>
<th>Download</th>
<th>Status</th>
<th>Next Sync Schedule</th>
<th>Schedule</th>
</tr>
</thead>
<tbody data-bind="foreach: PayrollIntegrationVM.GridDataList">
<tr>
<td><input type="checkbox" data-bind="checked:SHTYP_IS_MANUAL_SYNC"
class="i-checks" name="foo"></td>
<td data-bind="text:SHTYP_NAME"></td>
<td data-bind="text: moment(SHTYP_LAST_DATE).format('L LTS')"></td>
<td>
<div data-bind="ifnot: SHTYP_SYNC_STATUS">
<a href="#" data-bind="click: PayrollIntegrationVM.ErrorLog">
<span class="mr-2">
<img src="~/Content/img/icon-excel.png"
alt="Download">
</span> Download Error Log
</a>
</div>
</td>
<td data-bind="text: SHTYP_SYNC_STATUS? 'Success' : 'Failed'"><a href="#">
<i class="fa fa-close text-danger"></i></a></td>
<td data-bind="text: moment(SHTYP_NEXT_DATE).format('L LTS')" id="SHTYP_NEXT_DATE_GET"
name="Sync_Next_Date"></td>
<td><a href="#" id="Next-Sync-Value" data-toggle="modal" data-target="#sync"
name="Next_Sync_button">Next Sync.</a></td>
</tr>
</tbody>
this is the date time picker code
<div class="modal" id="sync" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-body">
<div class="col ml-5 d-flex flex-column justify-content-end">
<input type="date" class="form-control" id="NextSyncDate">
<input type="time" class="form-control mt-2" id="NextSyncTime">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="DoneButtonFunction()">Done</button>
</div>
</div>
</div>
</div>
this is the script part
<script language="JavaScript">
function DoneButtonFunction() {
var nextSyncDate = $('#NextSyncDate').val();
var nextSyncTime = $('#NextSyncTime').val();
var DateTime = nextSyncDate +" "+ nextSyncTime;
document.getElementById('SHTYP_NEXT_DATE_GET').innerHTML = DateTime;
}
}
</script>

it looks like in your js function, you find the element with the ID 'SHTYP_NEXT_DATE_GET', and js looks for the first one, try to save the row in the table, or find another way to Identify which 'SHTYP_NEXT_DATE_GET' element you want to edit

How to activate pop up modal if button is clicked using jquery?

I've created a table where my data can be ACTIVE or INACTIVE and this is already working, my goal is I just want to add a function that when I clicked the button to make my data INACTIVE, it will pop up a modal and has a message. But I don't know how will I make it pop up.
I've found a similar post but it cannot be applied to mine, because what I did has a different approach and I think mine is easier for myself to understand and will or might complicate things for me if I try to use the link. Thanks in advance
Here is my code in my JQUERY
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
var id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0';
}
$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {
selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass(
"btn-danger"),
selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass(
"btn-success"),
selector.text("Active"));
// location.reload();
}
});
});
// For status Active/Inactive
function StatusChange() {
$("#dataTables").DataTable().destroy();
$("#tb_body").empty();
var status = $('#stats').val();
if (status) {
$.ajax({
type: "POST",
url: "../forms/form_statusForspecs_dtbl.php",
data: {
status: status
},
success: function(data) {
$("#dataTables").append(data);
$("#dataTables").DataTable();
}
});
}
}
// Startup
$(document).ready(function() {
$('#stats').change(function() {
$(this).val();
});
$("#stats").trigger('change');
});
#import https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
.statusButton {
color: white;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 20px;
white-space: nowrap;
padding: 2px 12px;
font-size: 12px;
line-height: 1.42857143;
border-radius: 4px;
user-select: none;
}
</style>
</head>
<!-- this is the modal that I want to pop up -->
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</h4>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="submit" id="submitBtn" class="btn btn-danger pull-right" data-toggle="modal" data-target="#maModal" onclick="window.location.href='#'">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<br>
<br>
<a href="../forms/form_toolspec.php">
<button class="btn btn-primary pull-right">
<span class="fa fa-plus-circle"></span>
Add Record
</button>
</a>
</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<br>
<!-- Status -->
<div>
<form action="GET">
<div class="form-group">
<label> Table group by Status </label>
<select name="selector_id" onchange="StatusChange()" style="width:200px;" class="show-menu-arrow form-control" id="stats">
<!-- <option value="" disabled> Select Status </option> -->
<option value="1" selected> ACTIVE </option>
<option value="0"> INACTIVE </option>
</select>
</div>
</form>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my form_statusForspecs_dtbl.php AJAX call in function StatusChange()
<?php
include ("../include/connect.php");
$status = $_POST['status'];
$con->next_result();
$result = mysqli_query($con, "CALL GetToolSpecByStatus('$status')");
while ($row = mysqli_fetch_assoc($result))
{
echo '<tr>';
echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>";
echo '<td>'.$row['model_num'].'</td>';
echo '<td>'.$row['model_num_val'].'</td>';
echo '<td>'.$row['no_of_days'] .'</td>'; ?>
<td>
<center>
<p data-id="<?php echo $row['ID'];?>"
class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">
<?php echo ($row['status'])? 'Active' : 'Inactive'?>
</p>
</center>
</td>
<?php
echo '</tr>';
}
?>
Here is my form_btnStats.php AJAX call for button to change status and will be recorded in sql database
<?php
include('../include/connect.php');
$user_id=$_POST['id'];
$newStatus=$_POST['status'];
$query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'";
$result = mysqli_query($con, $query);
if($result === TRUE)
{
echo json_encode(1);
}
else
{
echo json_encode(0);
}
?>

As you only need to show popup when making button inactive you add code to show modal inside if(status == '1'){ and use $("#reason_for_modal").modal('show'); to show same . Also , put some condition around your ajax call so that it will execute only when status is 1 .Nextly ,if user click on deactivate button inside modal you can create one click event handler for same and pass value to ajax from there.
Demo Code :
var id;
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0'; //change to 0
$("#reason_for_modal").modal('show'); //show modal
}
//enter only when status is 1
if (status == '1') {
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {*/
selector.removeClass("btn-danger").addClass(
"btn-success");
selector.text("Active");
/*}
});*/
}
});
//if activate btn is click
$("#submitBtn").on("click", function() {
var reason = $("#reason").val(); //get reason..
$("#reason_for_modal").modal('hide'); //hide modal
console.log(id)
$("#reason").val("")//empty textarea
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: 0,
reason:reason
},
success: function(data) {*/
//change class and text
$("p[data-id=" + id + "]").removeClass("btn-success").addClass("btn-danger")
$("p[data-id=" + id + "]").text("Inactive")
/*}
});*/
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- this is the modal that I want to pop up -->
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="50%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
<tr>
<td>abc</td>
<td>14</td>
<td>1</td>
<td>5</td>
<td>
<center>
<p data-id="1" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
<tr>
<td>abc1</td>
<td>14</td>
<td>11</td>
<td>51</td>
<td>
<center>
<p data-id="2" class="status_checks statusButton btn-danger">
Inactive
</p>
</center>
</td>
</tr>
<tr>
<td>ab3</td>
<td>13</td>
<td>13</td>
<td>51</td>
<td>
<center>
<p data-id="3" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
<textarea id="reason"></textarea>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="button" id="submitBtn" class="btn btn-success pull-right"> De-Activate</button>
<button type="button" class="btn btn-danger pull-right" data-toggle="modal" data-dismiss="modal">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Option 1: Simple CSS class assignment
Example: https://www.w3schools.com/w3css/w3css_modal.asp
Option 2: Use jQuery.show() / jQuery.hide()
function StatusChange() {
...
if (status == 0) {
// This should use # / id
jQuery('div.modal').show();
}
}
Option 3: Use jQuery UI dialog
Example: https://jqueryui.com/dialog/

Rendering blade template base on Javascript Condition

I have
an account > index page with a table, and other modals, that I slice into a small blade views. On that page, I have 100000 accounts.
Problem
There is a section of PHP on top of my edit modal that is making 100000 curls requests, and cause a huge delay on my account > index page.
My goal
is to prevent rendering those blades right up front and only render if the user click on the Pencil icon.
Here is my account.index blade
#extends('layouts.internal.master')
#section('content')
<div class="panel account-panel" style="padding: 30px;">
<div class="panel-body">
<div class="col-sm-2">
<a id="account-create" class="btn btn-success btn-block mb20" data-toggle="modal" data-target=".account-create">Create</a>
</div>
<div class="table-responsive" style="margin-bottom: 0;">
<table class="table" id="account-table">
<thead>
<tr>
<th>#</th>
<th>Account ID</th>
<th>Customer Type</th>
<th>Name</th>
<th>Email</th>
<th class="text-center">Auto Provisioning</th>
<th class="text-center">AP</th>
<th style="min-width: 90px;">Action</th>
</tr>
</thead>
<tbody>
<?php
$x = 0;
?>
#foreach( $accounts as $account )
#if($account->email_address !== 'admin#benunets.com')
<tr>
<td>{{$x += 1 }}</td>
<td>{!! $account->account_id !!}</td>
<td>
{{-- <img src="{{ $image }}" width="30px"> --}}
<span class="badge" style="background-color: {{ $color2 }}">{!! $customer_type !!}</span></td>
<td>{!! ucfirst($account->first_name) !!} {!! ucfirst($account->last_name) !!}</td>
<td>{!! $account->email_address !!}</td>
<td class="text-center" >
#if($user != null AND $user->auto_provisioning == 1)
{!! Helper::intBoolToIcon($user->auto_provisioning) !!}
#else
<i title="false" style="font-size: 18px; color: #F44336" class="fa fa-times"></i>
#endif
</td>
<td class="text-center" ><b>{!! $count_cpe !!}</b></td>
<td class="text-center">
<!-- Buttons -->
<div class="tool-buttons">
<ul class="button-list">
<!-- Edit -->
<li><a data-toggle="modal" data-target=".account-edit-{!! $account->account_id !!}" class="tooltips account-edit" data-id="{!! $account->account_id !!}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil"></i></a></li>
<!-- Delete -->
<li><a data-toggle="modal" data-target=".account-destroy-{!! $account->account_id !!}" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash-o"></i></a></li>
</ul>
</div>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
</div>
#include('account.modal.account.destroy')
#include('account.modal.account.create')
#include('account.modal.account.edit')
#section('pagescripts')
<script type="text/javascript">
/*=============================================================================================
= Edit =
============================*/
//Edit Mode
$('.account-edit').click( function() {
var id = $(this).data("id");
console.log(id);
//Style
var val2 = $("#auto_provisioning_switch-"+id).val();
//Set the AP switch
if(val2 == 1){
$("#auto_provisioning_switch-"+id).bootstrapSwitch('state', true);
$("[name='auto_provisioning_switch']").val(1);
$('#service_plan_div-'+id).show();
// Set the service plan dd menu
var ajax = $.ajax({url: '/api/account/'+id+'/service_plan'});
ajax.done(function (service_plan) {
console.log(service_plan+' | id : ' + id );
$('#service_plan-'+id).val(service_plan);
});
}else{
$("#auto_provisioning_switch-"+id).bootstrapSwitch('state', false);
$("[name='auto_provisioning_switch']").val(0);
$('#service_plan_div-'+id).hide();
}
});
</script>
#stop
I only want to render
#include('account.modal.account.edit')
when I clicked on the pencil to edit.
OR
#include('account.modal.account.destroy')
when I clicked on the trash to delete.
How do I do that ?
Any hints on how to prevent that will be a huge help !!!

You can't cause the blade rendering to change with javascript code becuase the blade rendering is happening on your server and the javascript is happening on your browser.
What you CAN do is add javascript that hides the sections when a user interacts with your page.
Show or hide an element using javascript in all browsers

Bootstrap Modals to redirects me to a blank page

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">
<i class="fa fa-male fa-2x fa-fw pull-left"></i> Basketball
<i class="fa fa-female fa-2x fa-fw pull-left"></i> Basketball
<i class="fa fa-male fa-2x fa-fw pull-left"></i>Soccer
<i class="fa fa-female fa-2x fa-fw pull-left"></i> Soccer
<i class="fa fa-male fa-2x fa-fw pull-left"></i> Softball
</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">
</i>{{events.name}}
<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">×</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>

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.

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!
</i>{{events.name}}
<a class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a>