Angular js ng-click在子元素中不起作用

Question

I'm trying to toggle a variable on click of an element in the DOM and I'm getting some strange behaviour.

Full Example Here

Essentially if I put the ng-click on the .options div and leave the controller on the .options-tab div, the event triggers (but applies to everything inside the .options div). And for some reason I am forced to apply the ng-controller again.

<div ng-app ng-controller="Swipe" class="container">
    <div class="options" ng-click="swiped=!swiped2">
         <div ng-controller="Swipe" class="options-tab" ></div>
    </div>
</div>

If I put it on the element that I want it on, it doesn't trigger the event.

<div ng-app ng-controller="Swipe" class="container">
    <div class="options">
         <div ng-controller="Swipe" class="options-tab" ng-click="swiped=!swiped2"></div>
    </div>
</div>

Answer 1

You had a few issues:

1. Multiple controller declarations creating duplicate scopes
2. ng-click="swiped1=!swiped1" on both the options and options-tab elements (it was being set and then reversed immediately)
3. Your 2nd example was set to ng-click="swiped=!swiped2" instead of ng-click="swiped2=!swiped2"

Updated working fiddle: http://jsfiddle.net/Xya3f/2/