Angular Bootstrap Modal Not Showing

Question

Not sure why it works on jsfiddle but not on my PC!

I am working on a sample Angular app in which I am trying to launch a modal window on a click event. The code is:

HTML:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-app="testapp">
    <div class="container" ng-controller="TestController">
        <ul class="nav nav-tabs">
            <li ng-class="{active: activeTab=='inbox'}">
                <a ng-click="activeTab='inbox'">Inbox</a>
            </li>
            <li ng-class="{active: activeTab=='sent'}">
                <a ng-click="activeTab='sent'">Sent</a>
            </li>
        </ul>
        <br/>
        <table class="table table-bordered table-striped" ng-show="activeTab=='inbox'">
            <caption>No of Emails: {{getTotalEmails(emails)}}. Mailbox Size: {{getTotalSize(emails)}}</caption>
            <thead>
                <tr>
                    <th>From</th>
                    <th>Subject</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="email in emails" ng-click="showPopUp(email)">
                    <td>{{email.from}}</td>
                    <td>{{email.subject}}</td>
                    <td>{{email.date}}</td>
                </tr>
            </tbody>
        </table>

        <table class="table table-bordered table-striped" ng-show="activeTab=='sent'">
            <caption>No of Emails: {{getTotalEmails(sentEmails)}}. Mailbox Size: {{getTotalSize(sentEmails)}}</caption>
            <thead>
            <tr>
                <th>To</th>
                <th>Subject</th>
                <th>Date</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="email in sentEmails" ng-click="showPopUp(email)">
                <td>{{email.to}}</td>
                <td>{{email.subject}}</td>
                <td>{{email.date}}</td>
            </tr>
            </tbody>
        </table>
        <button class="btn btn-primary">Compose</button>

        <div class="modal" ng-show="isPopupVisible">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="closePopup()">&times;</button>
                <h3>{{selectedEmail.subject}}</h3>
            </div>
            <div class="modal-body">
                Body
            </div>
            <div class="modal-footer">
                Footer
            </div>
        </div>
    </div>
</body>

And the JS is:

var app = angular.module('testapp',[]);
app.controller('TestController',function($scope){
    $scope.activeTab = 'inbox';
    $scope.isPopupVisible = false;

    $scope.emails = [
        {
            from: 'John',
            to: 'me',
            subject: 'I love angular',
            date: 'Jan 1',
            body: 'hello world!',
            size: 10
        },
        {
            from: 'Jack',
            to: 'me',
            subject: 'Angular and I are just friends',
            date: 'Feb 15',
            body: 'just kidding',
            size: 10
        },
        {
            from: 'Ember',
            to: 'me',
            subject: 'I hate you Angular!',
            date: 'Dec 8',
            body: 'wassup dude',
            size: 10
        }
    ];

    $scope.getTotalEmails = function(emailArr){
        return emailArr.length;
    };

    $scope.getTotalSize = function(emailArr){
        return emailArr.reduce(function(prev,current){
            return prev + current.size;
        },0);
    };

    $scope.sentEmails = [
        {
            from: 'John',
            to: 'me',
            subject: 'I love angular',
            date: 'Jan 1',
            body: 'hello world!',
            size: 10
        },
        {
            from: 'Jack',
            to: 'me',
            subject: 'Angular and I are just friends',
            date: 'Feb 15',
            body: 'just kidding',
            size: 10
        },
        {
            from: 'Ember',
            to: 'me',
            subject: 'I hate you Angular!',
            date: 'Dec 8',
            body: 'wassup dude',
            size: 10
        },
        {
            from: 'Ember',
            to: 'me',
            subject: 'I hate you Angular!',
            date: 'Dec 8',
            body: 'wassup dude',
            size: 10
        }
    ];

    $scope.showPopUp = function(email) {
        $scope.isPopupVisible = true;
        $scope.selectedEmail = email;
    };

    $scope.closePopup = function() {
        $scope.isPopupVisible = false;
    };
});

When I debug the app, the debugger enters the showPopUp function and correctly changes the isPopUpVisible flag to true. Not sure why the modal isn't displaying. Please help!

Answer 1

Try this in place of your modal:

<div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="isPopupVisible">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="closePopup()">&times;</button>
         <h3>{{selectedEmail.subject}}</h3>
       </div>
       <div class="modal-body">Body</div>
       <div class="modal-footer">Footer</div>
     </div>
   </div>
 </div>

Answer 2

The Vanilla Botstrap Modal also didn't work for me, so I ended up with ng-bootstrap Modal, which integrates better with Angular.

ng-bootstrap modal example

Angular Bootstrap Modal Not Showing

Question

2 answers

solution1
2 ACCPTED 2016-09-13 12:08:25

solution2
0 2020-10-20 15:00:37

Angular Bootstrap Modal Not Showing

Question

2 answers

solution1 2 ACCPTED 2016-09-13 12:08:25

solution2 0 2020-10-20 15:00:37

solution1
2 ACCPTED 2016-09-13 12:08:25

solution2
0 2020-10-20 15:00:37