AngularJS: scope change in ngClick gets lost

Question

I have ngClick and ngClass on an element duplicated by ngRepeat:

<li
    ng-class="{'active': $parent.mem.A == $key, 'not-active': $parent.mem.A && $parent.mem.A != $key}"
    ng-repeat="($key, A) in As"
    ng-click="$parent.mem.A = $key">

Inside the li I have a button that changes the value of $parent.mem.A onClick:

<button ng-click="$parent.mem.A = $parent.findInHash('prev','A')">Activate previous</button>

findInHash() returns the expected value, and when I step through angular, the value in $scope.$apply() from ngEventDirective is correct; but somewhere it's getting lost.

fiddle

Answer 1

in your code all ng-click are executed when you click on the button

you just need to stop the event propagation like the following sample

$scope.findInHash = function ($event, dir, attr) {
    $event.stopPropagation();
    $event.preventDefault();
    ...


<button ng-click="$parent.mem.A = $parent.findInHash($event,'prev','A')">...

Answer 2

When you click on the button, the click event is propagated to the li element and its ng-click is executed as well.

In ng-click the $event variable is available so you can easily use it to stop event propagation:

<button ng-click="$parent.mem.A = $parent.findInHash('prev','A');$event.stopPropagation();">Activate previous</button>