JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
 
  <p>
    This example show an alternative solution when binding primitives inside of a child scope (<a href="https://jsfiddle.net/4bpbhmtL/">Original fiddle</a>)
  </p>
  1.
  <input type="text" ng-model="foo" ng-model-options="{ getterSetter: true }">

  <div ng-if="truthyValue">
    2.
    <input type="text" ng-model="foo" ng-model-options="{ getterSetter: true }">
  </div>

  <div>$scope.foo: {{ foo() }}</div>
</div>

JavaScript

angular.module('myApp', []).controller('MainCtrl', ['$scope', function($scope) {
		$scope.truthyValue = true;
      
  	var _foo = 'hello'; // this will be used to cache/represent the value of the 'foo' model 
      
  	$scope.foo = function(val) {
      // the function return the the internal '_foo' varibale when called with zero arguments,
      // and update the internal `_foo` when called with an argument
      return arguments.length ? (_foo = val) : _foo;
    };
}]);