Angular JS: ng-click scope set doesn't work in ng-if

Question

Today, I have seen a bug in angularjs:

When you try to set a scope value directly in a ng-click, it doesn\'t work when your ng-click is in a ng-if which test the same sc

Answer 1

It's not a bug, i think that "ng-if" creates its an own scope, so when you do here: "step = 3", you're creating and assign this variable in a separate scope than your controller

<li ng-if="step > 1">
     <div class="block-submit">
                <button class="btn btn-primary btn-lg" ng-click="step = 3">with ngif block</button>
     </div>
</li>

And here you still in a separate scope but when you call a function, probably angular will look for this function inside your scope, but when angular doesn't find it, it will look for the function in your parent scope, and when find it, it will assign to your step parent scope variable, that's why it work here and not in your code above.

<li ng-if="step > 1">
       <div class="block-submit">
                <button class="btn btn-primary btn-lg" ng-click="setStep(3)">With ngif block and scope function</button>
       </div>
</li>

I think that it is what is happening, if anyone could confirm it would be great!

Answer 2

I don't think this is a bug. You are just auto-creating properties and confusing scopes in the view.

Updated Fiddler.

This does work:

<li ng-if="step > 1">
    <div class="block-submit">
        <button class="btn btn-primary btn-lg" ng-click="$parent.step = 3">with ngif block</button>
    </div>
</li>

This is happening because self inside of the ng-if is creating a new scope.

Answer 3

ng-if creates its own scope, which can complicate things.

Changing ng-if to ng-show should solve the problem.