AngularJS ng-model in ng-if Tutorial
a quick tip for those trying to get the ng-model directive working in your angularjs application within ng-if.
ng-if Child Scopes
If you are wanting to use an ng-model scope within an ng-if then you'll have to access that scope using $parent
Our html page will look something like so:
<html ng-app="testApp">
<head>
<title>AngularJS ng-if child scopes example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-controller="testController">
<div ng-if="isFalse">
{{$parent.name}}
</div>
<p>{{name}}</p>
<div ng-if="isTrue">
<p>{{$parent.name}}</p>
</div>
<script src="script.js"></script>
</body>
</html>
And our controller looks something like this:
var testApp = angular.module("testApp", []);
testApp.controller("testController", function($scope) {
$scope.isTrue = false;
$scope.name = "Elliot";
});