JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myVm">
   {{1+1}}
   <div style="width:100px; height:100px; background-color:green"
        ng-click='show($event)'
   ></div>
   <div style="width:100px; height:100px; background-color:red"
        ng-show='selectVisible'     
   ></div>
</div>

JavaScript

angular.module("myApp", []);

angular.module("myApp").controller("myVm", function($scope, $document) {
    var vm = $scope;
    vm.selectVisible = false;
    vm.show = function(event) {
       console.log("inside click");
       event.stopPropagation();
       vm.selectVisible = vm.selectVisible ? false : true;
    }
    function outsideClickHandler(e) {
        console.log("outside click");
        $scope.$apply("selectVisible = false");
    }
    $document.on("click", outsideClickHandler);
    $scope.$on("destroy", function() {
        $document.off("click", outsideClickHandler)
    })
})