JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="personCtrl">

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">{{header}}</h4>
        </div>
        <div class="modal-body">
          <p>{{body}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>


  <br/>
  <button type="button" class="btn btn-info btn-lg" ng-click="openModal()">Open Modal</button>

</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  // $scope.body = "Some text in the modal.";
  // $scope.header = "Modal Header";
  $scope.body = "";
  $scope.header = "";
  $scope.openModal = function() {
    $scope.body = "Some text in the modal.";
    $scope.header = "Modal Header";
    jQuery("#myModal").modal();
  };

});