ng-class $event.stopPropagation() not working on parent in angular

Question

I have 2 nested ng-repeats . The parent one adds a class to itself based on ng-click , however when I click the child it is still happening when I thought it shouldnt.

<div class="add-filter-tags" data-filter="{{f1}}" ng-class="{'tag_selected' : tag_selected }" ng-repeat="(f1,f2) in filters" ng-click="tag_selected = !tag_selected;">
            <span>{{f1}}</span>             
        <div class="add-filter-tags sub-filter-tag"  data-filter="{{f1_2}}"  ng-click="$parent.$event.stopPropagation()" ng-repeat="(f1_2,f2_2) in filters[f1]" sibs ><span>{{f1_2}}</span></div>

</div> 

EDIT: I have also tried it without $parent and its not working.

Answer 1

You should stop event propagation on the child so that it does not bubble up to the parent, there will be no $event object attached to the $parent as well. It is a special argument passed in with ng-click ie

 ng-click="$event.stopPropagation()"

 angular.module('app', []).controller('ctrl', function($scope) { }); 

 .tag_selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <div class="add-filter-tags" ng-class="{'tag_selected' : tag_selected }" ng-if="true" ng-click="tag_selected = !tag_selected;"> <span>Parent</span> <div class="add-filter-tags sub-filter-tag" ng-click="$event.stopPropagation()" ng-if="true"><span>Child</span> </div> </div> </div>