JSFiddle - React, Tailwind, and code Playground

by mpetrovich

HTML

<div ng-app="app">
    <div ng-controller="NonAliasedController">
        <button ng-click="show = true">Show</button>
        <p ng-if="show">
            <button ng-click="NonAliasedController.show = false">
                DOESN'T WORK - Hide (NonAliasedController.show = false)
            </button>
            <button ng-click="show = false">
                DOESN'T WORK - Hide (show = false)
            </button>
            <button ng-click="$parent.show = false">
                WORKS - Hide ($parent.show = false)
            </button>
        </p>
    </div>
    <div ng-controller="AliasedController as ctrl">
        <button ng-click="ctrl.show = true">Show</button>
        <p ng-if="ctrl.show">
            <button ng-click="AliasedController.show = false">
                DOESN'T WORK - Hide (AliasedController.show = false)
            </button>
            <button ng-click="ctrl.show = false">
                WORKS - Hide (ctrl.show = false)
            </button>
            <button ng-click="$parent.ctrl.show = false">
                WORKS - Hide ($parent.ctrl.show = false)
            </button>
        </p>
    </div>
</div>

CSS

button {
    display: block;
}

[ng-controller] {
    padding: 20px;
    border: 1px solid #aaa;
}

JavaScript

angular.module('app', [])
.controller('NonAliasedController', function($scope) {
    $scope.show = false;
})
.controller('AliasedController', function($scope) {
    this.show = false;
});