Open a modal in AngularJS as a reusable service using $uibModal

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="script.js"></script>
    <script src="modal.js"></script>
</head>

<body>
  <div ng-app="app" ng-controller="mainController">
    <h4>Open a modal popup in AngularJS</h4>
    Click to open the modal : <button id="btn1" ng-click = "openModal()" class="btn-primary">Open Modal</button>
  </div>
</body>

</html>

// Code goes here

var app = angular.module('app',[ 'ui.bootstrap'])
.controller('mainController', function mainController( $scope,$uibModal, ModalEditor  ){
  
  var vm = this;
  
  $scope.openModal  = function(){ 
    
    console.log("button clicked")
    ModalEditor.openModal()
    
  }
})

/* Styles go here */

<div class="modal-header">
  <h3 class="modal-title" id="modal-title">Modal Title</h3>
</div>
<div class="modal-body" id="modal-body">
    Modal Content here..!
  
</div>
<div class="modal-footer">
  <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
  <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>

//modal controller and service definitions
app.controller('ModalCtrl', ModalCtrl); 
app.service('ModalEditor', ModalEditor); 

function ModalEditor($http,$uibModal,$rootScope){
  var service = {};
  service.openModal = openModal;
  
  function openModal(){
    
     $uibModal.open({
      templateUrl : 'modalTemplate.html',     //modal template
      controller  : [ '$uibModalInstance','$rootScope','$scope', ModalCtrl ] // pass the controller associated with the modal
      
    });
    
  }
  
  return service;
}

function ModalCtrl($uibModalInstance ,$rootScope,$scope){
  //define functions used by the modal
  
  $scope.ok = function(){
      
      $uibModalInstance.close()
  }
  
  $scope.cancel = function(){
      
      $uibModalInstance.close()
  }
  
}