Invoking modal window in AngularJS Bootstrap UI using JavaScript

OK, so first of all the http://angular-ui.github.io/bootstrap/ has a <modal> directive and the $dialog service and both of those can be used to open modal windows.

The difference is that with the <modal> directive content of a modal is embedded in a hosting template (one that triggers modal window opening). The $dialog service is far more flexible and allow you to load modal's content from a separate file as well as trigger modal windows from any place in AngularJS code (this being a controller, a service or another directive).

Not sure what you mean exactly by "using JavaScript code" but assuming that you mean any place in AngularJS code the $dialog service is probably a way to go.

It is very easy to use and in its simplest form you could just write:

$dialog.dialog({}).open('modalContent.html');  

To illustrate that it can be really triggered by any JavaScript code here is a version that triggers modal with a timer, 3 seconds after a controller was instantiated:

function DialogDemoCtrl($scope, $timeout, $dialog){  $timeout(function(){    $dialog.dialog({}).open('modalContent.html');    }, 3000);  }

This can be seen in action in this plunk: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

Finally, here is the full reference documentation to the $dialog service described here:https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

To make angular ui $modal work with bootstrap 3 you need to overwrite the styles

.modal {    display: block;}.modal-body:before,.modal-body:after {    display: table;    content: " ";}.modal-header:before,.modal-header:after {    display: table;    content: " ";}

(The last ones are necessary if you use custom directives) and encapsulate the html with

<div class="modal-dialog">  <div class="modal-content">    <div class="modal-header">      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>      <h4 class="modal-title">Modal title</h4>    </div>    <div class="modal-body">      ...    </div>    <div class="modal-footer">      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>      <button type="button" class="btn btn-primary">Save changes</button>    </div>  </div><!-- /.modal-content --></div><!-- /.modal-dialog -->

Open modal windows with passing data to dialog

In case if someone interests to pass data to dialog:

app.controller('ModalCtrl', function($scope,  $modal) {            $scope.name = 'theNameHasBeenPassed';      $scope.showModal = function() {                $scope.opts = {        backdrop: true,        backdropClick: true,        dialogFade: false,        keyboard: true,        templateUrl : 'modalContent.html',        controller : ModalInstanceCtrl,        resolve: {} // empty storage          };                          $scope.opts.resolve.item = function() {            return angular.copy(                                {name: $scope.name}                          ); // pass name to resolve storage        }                  var modalInstance = $modal.open($scope.opts);                    modalInstance.result.then(function(){            //on ok button press           },function(){            //on cancel button press            console.log("Modal Closed");          });      };                   })var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {         $scope.item = item;          $scope.ok = function () {        $modalInstance.close();      };            $scope.cancel = function () {        $modalInstance.dismiss('cancel');      };}

Demo Plunker