Syntex

$uibOpen.open({
appendTo: 
    	template: `Click to view the HTML template`,
    	bindToController: true,
    	controller: 'ModalBoxCtrl',
    	controllerAs: vm,
    	scope: $scope
}

 

Main part

Html Part
<div class="container" ng-app="modalbox" ng-controller="MainCtrl as vm" ng-cloak>
   <div class="container">
      <div id="modalboxdiv"></div>
   </div>
   <div class="container">
      <div class="col-md-12">
         <div class="row">
            <div class="col-md-3">
               <p>Normal Modal box</p>
               <button type="button" class="btn btn-primary" ng-click="vm.openModalbox()">ModalBox</button>
            </div>
         </div>
      </div>
   </div>
</div>
AngularJS part
function MainCtrl($uibModal, $scope, $document) {
  var vm = this;
  var options = {
    appendTo:angular.element(
       $document[0].querySelector('#modalboxdiv')
    ),
    template: `Click to view the HTML template`,
    bindToController: true,
    controller: 'ModalBoxCtrl',
    controllerAs: vm,
    scope: $scope
  }
 
  vm.openModalbox = function () {
    $uibModal.open(options);
  }
}

 

Scope Code

<div class="container" ng-app="modalbox" ng-controller="MainCtrl">
{{$scope.name}}
</div>
function MainCtrl($scope) {
  $scope.name = “Scope code of MainCtrl”;
  }

ControllerAs Code:-

 

<div class="container" ng-app="modalbox" ng-controller="MainCtrl as vm">
{{vm.name}}
</div>
function MainCtrl() {
  var vm = this;
  vm.name =  “ControllerAs code of MainCtrl”;
  }