AngularJS: Hide/Show Div using CheckBox Click Event

<html>

<head>
    <title></title>
</head>

<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function($scope)
        {
            //This will hide the DIV by default.
            $scope.IsVisible = false;
            $scope.ShowHide = function()
            {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.ShowPassport;
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <label for="chkPassport">
        <input type="checkbox" id="chkPassport" ng-model="ShowPassport" ng-change="ShowHide()" />
            Do you have Passport?
        </label>
        <hr />
        <div ng-show="IsVisible">
            Passport Number:
            <input type="text" id="txtPassportNumber" />
        </div>
    </div>
</body>

</html>