I have a button inside a DIV. I'm using ng-click to open two modal. One modal open when click on the DIV and other by button

Question

I have a button inside a DIV. I'm using ng-click to open two modal. One modal open when click on the DIV and other by button.While clicking DIV modal open fine, but when i click button both the modals are opening. I'm using different controllers for the modals.

HTML

 <div class="col-sm-12 row_padding_empty_both mt-10 clear" ng-if="quote.doc.status == 'Quoted'" style="cursor: pointer;" ng-repeat="quote in dbpro | filter: withInSearchOpp " ng-click="openOpp('lg',quote,'quote')">
            <div class="media">
                <div class="fleft icon-ef-2a" data-options="splash-1 splash-ef-1">
                        <div class="pull-left thumb " >
                            <img class="media-object img-circle" src="app/images/sample_logo.png" alt="">
                        </div>
                        {{quote.doc.parent_company.name}}</p>
                            <small class="text-lightred" >{{quote.doc.opp_name}}</small>
                            <small class="text-lightred" style="display:block">{{quote.doc.budgeted_revenue}}</small>
                        </div>
                    <div class="pull-right icons_group ">

                        <button type="button" class="btn btn-rounded-20 btn-default btn-sm" ng-click="openoppMail()" style="width:27px;"><i class="fa fa-paper-plane" ></i></button>

                    </div>
                </div>

            </div>
        </div>

Modal-1 DIV ng-click function.

$scope.openOpp = function (size,index,val) {
        console.log("large modal");
        var openOppModel = $modal.open({
            templateUrl: 'app/views/modals/oppModal.html',
            controller: 'oppModalInstanceCtrl',
            size:size,
            resolve: {
                name: function () {
                    return index;
                },
                name1: function () {
                    return val;
                }
            }
        });

        openOppModel.result.then(function (selectedItem) {
            console.log('saved');
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

Modal-2 Button ng-click function

$scope.openoppMail = function (size) {

        var modalInstance = $modal.open({
            templateUrl: 'app/views/modals/mail.html',
            controller: 'MailComposeCtrl',
            size: size,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {

        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

Answer 1

Add $event.stopPropagation() to the button handler.

$scope.openoppMail = function ($event,size) {
$event.stopPropagation();
        var modalInstance = $modal.open({
            templateUrl: 'app/views/modals/mail.html',
            controller: 'MailComposeCtrl',
            size: size,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {

        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };