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>
                <a href="[[ message.mail_link ]]" style="color: #000"><i class="icon reply"></i></a>
                <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>

```