How to use ng-hide and ng-show to toggle the visibility of an element based on a boolean variable in angularJS

<div ng-app="visibilityApp" ng-controller="VisibilityController">
    <button ng-click="toggleVisibility()">Toggle Visibility</button>
    <p ng-hide="isVisible">This is hidden!</p>
    <p ng-show="isVisible">This is visible!</p>
</div>

<script>
    var app = angular.module('visibilityApp', []);
    app.controller('VisibilityController', function($scope) {
        $scope.isVisible = true;

        $scope.toggleVisibility = function() {
            $scope.isVisible = !$scope.isVisible;
        };
    });
</script>