Angular Demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div ng-app="app" ng-controller="democontroller">
  <button type="button" class="btn btn-default" ng-click="click()">
    Open modal
  </button>
  <script type="text/ng-template" id="modal.html">
    <h1>modal</h1>
  </script>
</div>

CSS

.fade.in {
    opacity: 1;
}

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

JavaScript

var app = angular.module("app", ['ui.bootstrap']);
app.controller("democontroller", ["$scope", "$uibModal", function($scope, $uibModal) {
  $scope.click = function() {
    $uibModal.open({
      templateUrl: "modal.html",
      controller: "modal",
      scope: $scope
    });
  }
}]);

app.controller("modal", modal);

function modal() {
  console.log("in modal controller")
}