<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link data-require="bootstrap-css@3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
    <script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script data-require="angular-animate@1.6.*" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
    <script data-require="angular-touch@1.6.*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-touch.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="script.js"></script>
  </head>


  <body ng-app="plunker">
    <div ng-controller="ModalCtrl">
      <button class="btn btn-info" ng-click="open()" style="margin: 15px;">Open Modal</button>
      
      <h2 style="color: red;">{{result}}</h2>
    </div>
  </body>

</html>
var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('ModalCtrl', function($scope, $uibModal) {

  $scope.open = function() {
    var modalInstance =  $uibModal.open({
      templateUrl: "modalContent.html",
      controller: "ModalContentCtrl",
      size: '',
    });
    
    modalInstance.result.then(function(response){
        $scope.result = `${response} button hitted`;
    });
    
  };
})

app.controller('ModalContentCtrl', function($scope, $uibModalInstance) {

  $scope.ok = function(){
    $uibModalInstance.close("Ok");
  }
   
  $scope.cancel = function(){
    $uibModalInstance.dismiss();
  } 
  
});

.left-nav,.right-nav{
         float:left; 
      }
      .right-nav{
        margin-left:20px;
      }
      a{
        cursor:pointer; 
      }


.modal-header {
  text-align: center;
}
<div class="modal-header">
  <h3>Modal header</h3>
</div>
<div class="modal-body">
 <h4>Just something random here</h4>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>