Develop Reference

Error Opening Bootstrap Modal With JavaScript

I'm working on a piece of UI that involves a listing of rows in the database. Each row is editable, and when the edit button is clicked, my intent is to bring up a modal dialogue window with data preloaded in a form via AJAX for editing that specific row as shown in the following picture.
The following code shows a working setup you can play with.
jQuery(document).ready(function() {
// console.log('podcast episode list js loaded');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("Clicked row " + rowID + "\n");
//populate the content of the modal window
//jQuery('#editModal').modal('show');
modal1 = bootstrap.Modal.getOrCreateInstance('#editModal');
modal1.show();
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<!-- table displaying contents of encoding queue -->
<div class="row">
<div class="table-responsive-xxl">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">ID#</th>
<!-- episode_id -->
<th scope="col">Podcast</th>
<!-- podcast_code -->
<th scope="col">Title</th>
<th scope="col">Seq.</th>
<th scope="col">Status</th>
<!-- last_action -->
<th scope="col">Date</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>Build a birdhouse</td>
<td>345</td>
<td>{"error":"none","message":"initial insert","status":"processing"}</td>
<td>2023-03-22</td>
<td class="text-end" style="white-space: nowrap">
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" onclick="loadEditModal(8)">Edit</button>
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- class="row" -->
<!-- modal for editing rows -->
<div class="row">
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="editModalBody">
this is where the body content goes...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
However, I'm getting the following error in the js console every time the edit button is clicked to display the modal:
Uncaught TypeError: can't access property "backdrop", this._config is undefined
This appears to be due to the fact that I'm launching the modal via javascript with the onclick event. If I change the html and js slightly as follows, and use the "data-bs-target" property of the button to open the modal instead, it all works without js errors.
jQuery(document).ready(function() {
// console.log('podcast episode list js loaded');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("Clicked row " + rowID + "\n");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- table displaying contents of encoding queue -->
<div class="row">
<div class="table-responsive-xxl">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">ID#</th>
<!-- episode_id -->
<th scope="col">Podcast</th>
<!-- podcast_code -->
<th scope="col">Title</th>
<th scope="col">Seq.</th>
<th scope="col">Status</th>
<!-- last_action -->
<th scope="col">Date</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>Build a birdhouse</td>
<td>345</td>
<td>{"error":"none","message":"initial insert","status":"processing"}</td>
<td>2023-03-22</td>
<td class="text-end" style="white-space: nowrap">
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="loadEditModal(8)">Edit</button>
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- class="row" -->
<!-- modal for editing rows -->
<div class="row">
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="editModalBody">
this is where the body content goes...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
But I can't do it this way because I have to fetch the data to edit with AJAX and populate the body of the modal before I display it. Can anyone clue me in to what I need to do to eliminate the error?

This appears to be due to the fact that I'm launching the modal via javascript with the onclick event.
This is not correct.
The problem occurs because you are using the data-bs-toggle="modal" attribute without specifying what the target is.
If you try to remove the onclick attribute from the button the problem still exist.
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal">Edit</button>
Just remove the data-bs-toggle="modal" attribute from the edit button and use onclick only.
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="loadEditModal(8)">Edit</button>
I hope it helps

Uncaught TypeError: Cannot set property 'innerHTML' of null Django

I know there are many similarly to this question but I can't find a way.
I have a table and when I click edit in row table the modal should show and I want to pass data from table to modal and display some data in modal that comes from my table .When the button click it always error and the modal didn't show.I been using Django.Please see the image below. Below is my current code. Can you help me please?
enter image description here
accounts.html
{% extends 'navigation.html' %}
{% block content %}
<script>
function exampleModal(firstName,lastName){
document.getElementById('firstNameValueId').innerHTML = firstName
document.getElementById('secondNameValueId').innerHTML = lastName
$("#exampleModal").modal('show');
}
</script>
<!-- mytable -->
<div class="tabs-animation">
<div class="card mb-3">
<div class="card-header-tab card-header">
<div class="card-header-title font-size-lg text-capitalize font-weight-normal"><i
class="header-icon lnr-laptop-phone mr-3 text-muted opacity-6"> </i>Accounts Information
</div>
<div class="btn-actions-pane-right actions-icon-btn">
<div class="btn-group dropdown">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
class="btn-icon btn-icon-only btn btn-link">
<i class="pe-7s-menu btn-icon-wrapper"></i>
</button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-right rm-pointers dropdown-menu-shadow dropdown-menu-hover-link dropdown-menu">
<h6 tabindex="-1" class="dropdown-header">Header</h6>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-inbox"> </i><span>Menus</span>
</button>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-file-empty"> </i><span>Settings</span>
</button>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-book"> </i><span>Actions</span>
</button>
<div tabindex="-1" class="dropdown-divider"></div>
<div class="p-3 text-right">
<button class="mr-2 btn-shadow btn-sm btn btn-link">View Details</button>
<button class="mr-2 btn-shadow btn-sm btn btn-primary">Action</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Action</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Username</th>
<th>Date joined</th>
</tr>
</thead>
<tbody>
{% for user_information in user_information %}
<tr>
<td><a class="btn btn-info" onclick="exampleModal('{{user_information.first_name}}','{{user_information.last_name}}')">Edit</a></td>
<td>{{user_information.first_name}}</td>
<td>{{user_information.last_name}}</td>
<td>{{user_information.email}}</td>
<td>{{user_information.username}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
<!-- This is my modal -->
<div id="modal-div">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Personal Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<form action="#" method="post">
<label for="firstname"> <p id="firstNameValueId">Some text in the Modal..</p></label>
<div>
<input type="text" class="custom-input1 form-control " id="firstNameValueId" name="firstname" placeholder="First name" />
</div>
</div>
<div class="form-group">
<label for="lastname">Last name</label>
<div>
<input type="text" class="form-control" id="secondNameValueId" name="lastname" placeholder="Last name" />
</div>
</div>
</form>
</div>
</div>

Dropdown toggle stops working after adding modal

I have a Bootstrap dropdown which worked fine till now.Now i have added two bootstrap modals to my code.My dropdown doesn't work after i add modals to my code.If i remove modals it just works fine.I cant figure out why.
Does this has something to do with data-toggle as i can see its the only common thing between both of them
This is my code.
<div class="my-container" ng-controller="compCategoryCtrl">
<div class="compare-table">
<div class="head-info">
<h3>Select colleges to compare</h3>
</div>
<div class="clearfix"></div>
<div class="find-colleges">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value1">{{selected_value1}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg1(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value2">{{selected_value2}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg2(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class=" col-md-4 go">
<button class="btn compare_buton trigger open" ng-click="fetch()">Go</button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="nav-for-table slider close">
<div id="home">
<table class="table table-striped table-hover table-bordered">
<tr ng-repeat="(key, value) in data1[0]">
<td class="col-md-6 head-field active">{{key}}</td>
<td class="col-md-3" ng-repeat="x in data1">
{{x[key]}}
</td>
<td class="col-md-3" ng-repeat="x in data1">
{{data2[$index][key]}}
</td>
</tr>
<tr>
<td class="col-md-6 head-field active">Departments</td>
<td class="col-md-3" data-toggle="modal" data-target="#show1">
Click here to view Departments
</td>
<td class="col-md-3" data-toggle="modal" data-target="#show2">
Click here to view Departments
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal fade" id="show1" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept1">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="show2" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept2">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script>
$('.trigger.open').on('click', function () {
$('.slider').removeClass('close');
});
$('.trigger.close').on('click', function () {
$('.slider').addClass('close');
});
</script>
Can somebody please help.

Remove the inline styles you have on each Modal:
style="display: block;z-index: 9999;margin-top: 100px;"
Once those are removed the modals fire as expected. I might also recommend removing the .close class from <div class="nav-for-table slider"> as that class is used by Bootstrap and might cause various display conflicts.
See this Bootply for a functional example:
https://www.bootply.com/dFixsdYLpG

how to pass data to modal using bootsrap

I was trying to figure out how to pass a variable to a model. For example, I have a table that have lists of student. I want to click one of them and have a modal popup that is matching that student. So I obviously need to pass some how the id in the table to the model. This is all in Asp.net using razor. And then after having that model popup I would like to edit and resubmit which then would refresh the table. Perhaps even have a success message. I am using the bootstrap so I was thinking of using the alert to say Successfully Updated! or something.
here is the code. Please help me to resolve this issue.
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>Name</th>
<th>DNIS </th>
<th>Created by</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td> #Html.DisplayFor(modelItem => item.service_name)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.dnis)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.created_by) </td>
<td class="center"> #Html.DisplayFor(modelItem => item.date_time)</td>
<td class="center">
<a class="btn btn-success" href="~/Service/AssignSkillGroup/#item.service_name">
Add/Del SkillGroup
</a>
<a class="btn btn-info" href="~/Service/Edit/#item.service_name">
<i class="icon-edit icon-white"></i>
Edit
</a>
<a class="btn btn-danger" data-toggle="modal" data-id="#item.service_name" data-target="#myModal" >
<i class="icon-trash icon-white"></i>
Delete
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" href="/Service/Delete/">
Delete
<a><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </a>
</a>
</div>
</div>
</span>
</body>

You can use bootstrap dialog event to achieve what you want :
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get id attribute of the clicked element (delete button)
var id = $(e.relatedTarget).data('id');
// do what you want with the id ..
});

You can make your modal like the following
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" onclick="Close()" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" id="del" >
Yes
</a>
<a class="btn btn-default" onclick="Close()">
No
</a>
</div>
</div>
</span>
The add the following script and call those methods through your delete button and pass the id to the script function.
<script>
function deleteFunction(id) {
$('#myModal').show();
var a = document.getElementById('del');
a.href = "/Service/Delete/" + id;
}
function Close()
{
$('#myModal').hide();
}
</script>

Angular ignoring hidden elements

I have a list of messages returned from a server and i'm using angular to template those messages into rows in a table. That all works fine, but i want to have it so when you click the row a modal pops up with that rows information. Unfortunately angular seems to completely ignore hidden elements even though the modal is within the app and controller namespace (not sure if namespace is the proper term). I have googled around and found a BUNCH of fixes for input fields but none for just simple binding. Heres my code.
HTML (Table)
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
</div>
JavaScript
$('.modal.ui').modal();
var app = angular.module('messages', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
app.controller('MessagesCtrl', function($scope, $http) {
$scope.currentMessage = {};
$http.get('{{ route('message.index') }}').then(function(resp) {
$scope.messages = resp.data.messages;
});
$scope.show = function(message) {
$scope.currentMessage = message;
}
});
HTML (All)
<div style="padding: 10px" data-ng-app="messages" data-ng-controller="MessagesCtrl">
<table class="table ui celled striped">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="message in messages | orderBy:['viewed', 'created_at']" class="message">
<td>[[ message.email ]]</td>
<td>[[ message.phone || 'N/A' ]]</td>
<td>[[ message.subject ]]</td>
<td>
<i class="icon reply"></i>
<i class="icon unhide" data-ng-click="show(message)"></i>
<i class="icon trash" data-ng-click="destroy(message)"></i>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
<div class="actions">
<a class="ui button green icon mini labeled">
<i class="icon reply"></i>
Reply
</a>
<button class="ui button red icon mini labeled">
<i class="icon trash"></i>
Delete
</button>
</div>
</div>

This is full example: i used bootstrap for open modal
<!doctype html>
<html ng-app="messages" ng-controller="MessagesCtrl">
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/angular.js"></script>
</head>
<body>
<div>
<table class="table table-bordered">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="message in messages" class="message">
<td>{{ message.email }}</td>
<td>{{ message.phone || 'N/A' }}</td>
<td>{{ message.subject }}</td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" ng-click="openModal(message)">
show message
</button>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
remove message
</button>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Message</h4>
</div>
<div class="modal-body">
<div><strong>Sent: </strong>{{ currentMessage.sent_at }}</div>
<div><strong>From: </strong>{{ currentMessage.email }}</div>
<div><strong>Phone: </strong>{{ currentMessage.phone || 'N/A' }}</div>
<div><strong>Subject: </strong>{{ currentMessage.subject }}</div>
<div style="margin-top: 10px">
<h1>Message</h1>
{{ currentMessage.body }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-primary">Reply</button>
</div>
</div>
</div>
</div>
<script>
angular.module("messages", []);
angular.module("messages").controller("MessagesCtrl", function($scope) {
$scope.messages = [{
email: "x#x.com",
phone: "092222222",
subject: "test",
sent_at: "2015/15/15",
body: "your message"
}];
$scope.openModal = function(message) {
$scope.currentMessage = message;
}
});
</script>
</body>
</html>

I figured out the problem. For those using semantic ui (and perhaps bootstrap) when the modal is initialized a script will move it from where you placed it (in the app directive) to the the bottom of the body tag. Like #Maher did in his example make the entire body the app and controller to fix this.