ng-click not working with ng-if angularjs

Question

I am trying to toggle a div on button click like as bellow.

This is working .

<div>
    <button ng-click='x = ! x'>toggle</button>
</div>  
<div  ng-include="'pages/include/search.html'" ng-show='x'></div>

This is not working .

<div ng-if="$state.current.url!='/splash'" >
    <button ng-click='x = ! x'>toggle</button>
</div>  
<div  ng-include="'pages/include/search.html'" ng-show='x'></div>

Why it is not working, when I add ng-if="$state.current.url!='/splash'" ?

Answer 1

Well,

Every angular directive create new scope

In the code below

<div ng-if="$state.current.url!='/splash'" >
   <button ng-click='x = ! x'>toggle</button>
  </div>  
 <div  ng-include="'pages/include/search.html'" ng-show='x'></div>

The ng-if directive create new scope.And withing this scope the value of x is updated on button click.But this new value of x is not accessible outside this ng-if div as it is local to that scope and it is primitive type. Since this x is primitive type so there is no data update as reference are differant.

You should use object model instead.

Here is the updated HTML

<div ng-if="$state.current.url!='/splash'" >
   <button ng-click='x.showHide = ! x.showHide'>toggle</button>
  </div>  
 <div ng-include="'pages/include/search.html'" ng-show='x.showHide'>This is div</div>

define x like this one in your controller.

$scope.x = {showHide:false}

EDIT-

In your first woking HTML, there is not directive on div.So, both these DIV come under same scope.So, x accessible across this two DIV with updated value.

<div>
<button ng-click='x = ! x'>toggle</button>
</div>  
<div  ng-include="'pages/include/search.html'" ng-show='x'></div>