AngularJS ng-model in ng-if Tutorial

Elliot Forbes ⏰ 1 Minutes 📅 Apr 15, 2017

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";
});