AngulaJs: ng-click not work on netsted uib-accordion

Question

I use nested uib-accordion, and I want add ng-click to each of uib-accordion.

      <uib-accordion close-others="oneAtATime1">
            <div uib-accordion-group class="panel-default" is-open="prInfo.isOpen" heading="{{prInfo.name}}"
                 ng-click="getPayrolls(prInfo)"
                 ng-repeat="prInfo in allPersonInfoNames">
                <uib-accordion close-others="oneAtATime2">
                    <div uib-accordion-group class="panel-default" heading="{{payroll.logPeriod.name}}"
                         ng-click="getPayroll(payroll)"
                         ng-repeat="payroll in prInfo.payrolls | orderBy: 'logPeriod.dbId': reverse = true">
                        <div class="row">
                            <div class="col-md-4">
                                <h1>in nested accordion</h1>
                            </div>
                        </div>
                    </div>
                </uib-accordion>
            </div>
        </uib-accordion>

So, when I click on first accordion, first ng-click work correctly, but when I click on second accordion, again first ng-click is called, and second ng-click never called.

I can solve this problem by adding second ng-click in body of accordion, but by this solution, I have to click 3 times to work second ng-click, first time for open the first accordion and run first ng-click, second time to open second accordion and third time click on function in nested accordion body to run second ng-click. How can I separate ng-click functions by first solution?

demo on plunker

Answer 1

The problem your facing seems to be related to this thread: AngularJS ng-click stopPropagation When you click on the second ng-click, you have to stop the event propagation to prevent the first method to be triggered.

I Hope it may help