angularjs ng-click with boostrap's data-dismiss="modal"

[Leblanc Meneses]

data-dismiss="modal" is bootstrap's way to dismiss a modal window


<button data-dismiss="modal" class="btn btn-primary" ng-click="AddWidget(SizeX,SizeY,Row,Column)">Add Widget</button>


Individually data-dismiss works to close modal window.

After adding ng-click to do work in my controller the modal window no longer closes.

Anyone know how to get these 2 attributes to work nicely together?

version: 1.0.5

[clayton collie]

Have you seen 

http://angular-ui.github.io/bootstrap/ 

[vipin govind]

use this inside ng-click function

$('#myModal').modal('hide');

[Rahul Nair]

Hi Leblanc

How did you resolve this issue?

Iam also facing the same.

Seek valuable help and support.

Thanks in Advance!

[Gábor Imre]

Hello all! 

I've met this problem when I wanted to use ng-enabled / ng-disabled on a modal close button.

See the 2 solutions below, each works: 

• Cancel button with data-dismiss, no ng-disabled
• Send button with ng-disabled, it closes the modal manually in a default onclick

The Send button would not work with the data-dismiss field. Nor would it work if the modal('hide') within the ng-click, I think it wouldn't work because of Angular's $scope. 

<div class="modal-footer">
   <button type="button" class="btn btn-link notes-cancel-btn" data-dismiss="modal"
         ng-click="ctrl.cancelEdit();">Cancel</button>
   <button type="button" class="btn btn-primary"
         onclick="$('.create-new-note').modal('hide')"
         ng-click="ctrl.createNote()"
         ng-disabled="bodyError()">Send!</button>
</div>

Note that this solution keeps the separation of concerns: The controller has nothing to know about the underlying HTML. 

One can also use some Angular+Bootstrap libs (as mentioned before by @clayton).

Regards, 

Gabor