AngularJS ng-model in ng-if Tutorial Image 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">
    <title>AngularJS ng-if child scopes example</title>
    <script src=""></script>
  <body ng-controller="testController">
    <div ng-if="isFalse">


    <div ng-if="isTrue">

    <script src="script.js"></script>

And our controller looks something like this:

var testApp = angular.module("testApp", []);
testApp.controller("testController", function($scope) {
  $scope.isTrue = false;

  $ = "Elliot";
Elliot Forbes

Elliot Forbes
Twitter: @Elliot_f

Hey, I'm Elliot and I've been working on TutorialEdge for the last 4 years! If my work has helped you in any way, shape, or form then please consider supporting my work.

become a patron Buy Me A Coffee