ng-model Doesn't Work Inside ng-if | Scope Properties Doesn't Change inside ng-if | AngularJS Tutorial

If an ng-model is used inside an ng-if, then the model does not work as expected.

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="testb" />
        </div>
        <div ng-if="!someothervar">
            testc (with ng-if): <input type="checkbox" ng-model="testc" />
        </div>

    </div>
</div>

The ng-if directive will create a child scope. So the CheckBox changes the testb inside of the child scope and not the outer parent scope.

To modify the data in the parent scope, you'll need to make use of $parent as given below:

You can use $parent to refer to the model defined in the parent scope like this

<input type="checkbox" ng-model="$parent.testb" />