I'm starting with Angular.js and I have a problem with ng-show.

When I click on the first bloc #first-block the second block #second-block toggles its ng-show/ng-hide. That works.

But I want the same behavior when I click on the third block #third-block. That doesn't work.

I have tried with ng-click="show = true" with no success.

<div  ng-controller="CommentController">

    <div id="first-block"  ng-click="show = !show">
        <!--first block-->   
    </div>

    <div id="second-block"  ng-show="show" >
        <!--second block that toggle show/hide when I click on first block.-->    
    </div>

    <div ng-repeat="answer in answers" > 

        <div id="third-block" ng-click="show = !show">
             <!--third block. Nothing is happening when I click on this one.-->   
        </div>

    </div>
</div>

Thanks for your help

I'm starting with Angular.js and I have a problem with ng-show.

When I click on the first bloc #first-block the second block #second-block toggles its ng-show/ng-hide. That works.

But I want the same behavior when I click on the third block #third-block. That doesn't work.

I have tried with ng-click="show = true" with no success.

<div  ng-controller="CommentController">

    <div id="first-block"  ng-click="show = !show">
        <!--first block-->   
    </div>

    <div id="second-block"  ng-show="show" >
        <!--second block that toggle show/hide when I click on first block.-->    
    </div>

    <div ng-repeat="answer in answers" > 

        <div id="third-block" ng-click="show = !show">
             <!--third block. Nothing is happening when I click on this one.-->   
        </div>

    </div>
</div>

Thanks for your help

• javascript
• jquery
• angularjs

2 Answers 2

It is because ng-repeat creates a new scope and the transcluded element within it is in a separate scope, you can use a object like

<div id="first-block"  ng-click="state.show = !state.show">1</div>
<div id="second-block" ng-show="state.show">2</div>
<div ng-repeat="answer in answers" >
    <div id="third-block" ng-click="state.show = !state.show">{{$index}}</div>
</div>

then

app.controller('CommentController', function ($scope) {
    $scope.state = {}
    $scope.answers = [1, 2, 3]
})

Demo: Fiddle

or access the parent scope inside the ng-repeat transclude using $parent

<div id="first-block"  ng-click="show = !show">1</div>
<div id="second-block"  ng-show="show">2</div>
<div ng-repeat="answer in answers" >
    <div id="third-block"  ng-click="$parent.show = !$parent.show">{{$index}}</div>
</div>

Demo: Fiddle

ng-repeat creates a new scope as child of the current scope with each iteration.

What you can do to access the parent scope is use $parent. For example:

<div id="first-block"  ng-click="show = !show">
    <!--first block-->   
</div>

<div id="second-block"  ng-show="show" >
    <!--second block that toggle show/hide when I click on first block.-->    
</div>

<div ng-repeat="answer in answers" > 

    <div id="third-block" ng-click="$parent.show = !$parent.show">
         <!--third block. Nothing is appening when I click on this one.-->   
    </div>

</div>

Check out AngularJS' explanation of understanding scopes