Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css&quot; integrity=&quot;sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div ng-controller="MyCtrl" ng-init="LoadControl()">
  <div class="modal fade" id="myModalForms" role="dialog" tabindex="-1" aria-labelledby="myModalLabel1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel"><strong>Notification!</strong></h4>
        </div>
        <div class="modal-body">
          <strong>{{outputdata}}</strong>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">
            <span class="glyphicon glyphicon-remove search-close-icon">Close</span>
          </button>
        </div>v  
      </div>
    </div>
  </div>
</div>
<script>window.__theme = 'bs4';</script>

CSS

.fade.in {
    opacity: 1;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.LoadControl = function() {
    alert("Hello");
    $scope.outputdata = "No data found. Please try again.";
    $('#myModalForms').modal('show');
  }
}