JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <h4>Example 1</h4>
    <div ng-init="showIt = true">
        <div ng-if="true" ng-init="">
            <div>child.showIt = {{ showIt }}</div>
            <div>parent.showIt = {{ $parent.showIt }}</div>
            <button ng-click="showIt = !showIt">toggle child</button>
            <button ng-click="$parent.showIt = !$parent.showIt">toggle parent</button>
        </div>
    </div>
    
    <hr />

    <h4>Example 2</h4>
    <div ng-init="config = { show: true }">
        <div ng-if="true" ng-init="">
            <div>child.config.show = {{ config.show }}</div>
            <div>parent.config.show = {{ $parent.config.show }}</div>
            <button ng-click="config.show = !config.show">toggle child</button>
            <button ng-click="$parent.config.show = !$parent.config.show">toggle parent</button>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>