title: Angular Bootstrap Modal Not Showing
body: <p><strong>EDIT: <a href="http://jsfiddle.net/k7tw188c/" rel="nofollow">http://jsfiddle.net/k7tw188c/</a></strong></p>
  
  <p><strong>Not sure why it works on jsfiddle but not on my PC!</strong></p>
  
  <hr>
  
  <p>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:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="testapp"&gt;
      &lt;div class="container" ng-controller="TestController"&gt;
          &lt;ul class="nav nav-tabs"&gt;
              &lt;li ng-class="{active: activeTab=='inbox'}"&gt;
                  &lt;a ng-click="activeTab='inbox'"&gt;Inbox&lt;/a&gt;
              &lt;/li&gt;
              &lt;li ng-class="{active: activeTab=='sent'}"&gt;
                  &lt;a ng-click="activeTab='sent'"&gt;Sent&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;br/&gt;
          &lt;table class="table table-bordered table-striped" ng-show="activeTab=='inbox'"&gt;
              &lt;caption&gt;No of Emails: {{getTotalEmails(emails)}}. Mailbox Size: {{getTotalSize(emails)}}&lt;/caption&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;From&lt;/th&gt;
                      &lt;th&gt;Subject&lt;/th&gt;
                      &lt;th&gt;Date&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr ng-repeat="email in emails" ng-click="showPopUp(email)"&gt;
                      &lt;td&gt;{{email.from}}&lt;/td&gt;
                      &lt;td&gt;{{email.subject}}&lt;/td&gt;
                      &lt;td&gt;{{email.date}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  
          &lt;table class="table table-bordered table-striped" ng-show="activeTab=='sent'"&gt;
              &lt;caption&gt;No of Emails: {{getTotalEmails(sentEmails)}}. Mailbox Size: {{getTotalSize(sentEmails)}}&lt;/caption&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;To&lt;/th&gt;
                  &lt;th&gt;Subject&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr ng-repeat="email in sentEmails" ng-click="showPopUp(email)"&gt;
                  &lt;td&gt;{{email.to}}&lt;/td&gt;
                  &lt;td&gt;{{email.subject}}&lt;/td&gt;
                  &lt;td&gt;{{email.date}}&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;button class="btn btn-primary"&gt;Compose&lt;/button&gt;
  
          &lt;div class="modal" ng-show="isPopupVisible"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="closePopup()"&gt;&amp;times;&lt;/button&gt;
                  &lt;h3&gt;{{selectedEmail.subject}}&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  Body
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  Footer
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the JS is:</p>
  
  <pre><code>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;
      };
  });
  </code></pre>
  
  <p>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!</p>