Home Angularjs Open Bootstrap Modal Angularjs ng-click event

Open Bootstrap Modal Angularjs ng-click event

by therichpost
How to make business template with Bootstrap 4 and Angular 9?
Hello to all, In this post, I will tell you, How to open Open Bootstrap Modal Angularjs ng-click event?

Angularjs and Bootstrap both are very famous.

Here is working and tested code for Open Bootstrap Modal Angularjs ng-click event:
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<body ng-app="myApp">

<!--Angular Js Code -->

<div  ng-controller="myCtrl">
<button ng-click='selectMe($event)' class="btn btn-info btn-lg">Click Me!!</button>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
      $scope.selectMe = function (event){
<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

 If you have any query related to Angularjs and Bootstrap then feel free to ask.

You may also like


rosi April 29, 2020 - 7:05 am

It doesn’t work to me 🙁

Ajay Malhotra April 29, 2020 - 7:58 am

Can you please tell me the issue and or I think, you have added latest version CDN’s.

Thank you

Ajay Malhotra September 24, 2020 - 4:35 am

I checked and it is working 🙂

Maher September 23, 2020 - 11:41 am

angular.js:14800 TypeError: $(…).modal is not a function

Ajay Malhotra September 23, 2020 - 11:48 am

Please use latest CND’s.

Ajay Malhotra September 24, 2020 - 4:34 am

It is working for me 🙂


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.