I am trying to bind ng-click on ng-repeated elements and trying to show/hide a div. For a strange reason, its not working for me. Can any one please take a look ? Adding the fiddle link below
http://jsfiddle.net/uLujthsp/8/
<div data-ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names" ng-click="click!=click">
{{ x }}
</li>
</ul>
<div id="hiddenDiv" ng-class="{show:click}">Showing</div>
</div>
You should try ng-click="click=!click" instead of ng-click="click!=click".
Also your $scope.click should not be a primitive type object as your ng-repeat section would maintain its own copy of click variable which would not be available to outer html.See this.
You must use your ng-init directive to initialize click like ng-init="items=['item 1','item 2'];obj={click:false}".
Then use ng-click="obj.click=!obj.click" and ng-class="{show:obj.click}".
Here's a working plunker.
click variable within the same html element upon which ng-repeat was defined. You will have to use wrapper obj with ng-init or define it in your controller like$scope.obj=.. to use it outside the container html element.see this example :http://jsfiddle.net/uLujthsp/18/
<div data-ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul ng-click="click =! click">
<li ng-repeat="x in names" >
{{ x }}
</li>
</ul>
{{click}}
<div ng-show="click">Showing</div>
</div>
