Angularjs ng-model doesn't work inside ng-if
The ng-if directive, like other directives creates a child scope. See the script below (or this jsfiddle)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script>
function main($scope) {
$scope.testa = false;
$scope.testb = false;
$scope.testc = false;
$scope.obj = {test: false};
}
</script>
<div ng-app >
<div ng-controller="main">
Test A: {{testa}}<br />
Test B: {{testb}}<br />
Test C: {{testc}}<br />
{{obj.test}}
<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" /> {{testb}}
</div>
<div ng-if="!someothervar">
testc (with ng-if): <input type="checkbox" ng-model="testc" />
</div>
<div ng-if="!someothervar">
object (with ng-if): <input type="checkbox" ng-model="obj.test" />
</div>
</div>
</div>So, your checkbox changes the testb inside of the child scope, but not the outer parent scope.
Note, that if you want to modify the data in the parent scope, you'll need to modify the internal properties of an object like in the last div that I added.
You can use $parent to refer to the model defined in the parent scope like this
<input type="checkbox" ng-model="$parent.testb" />
You can use ngHide (or ngShow) directive. It doesn't create child scope as ngIf does.
<div ng-hide="testa">