AngularJS- document.getElementById() - Why does element return null?

I have a checkbox on a dialog box that is opened when clicking a button in an AngularJS widget in my HTML form:

<form class="m-body" role="form" data-ng-submit="preview($event)" novalidate>
    ...
    <div data-ng-if="widget.name === 'display-box'" ng-dige="hideWidgetHeading()">
        <div class="divider"></div>
        <div class="row">
            ...
        </div>
        ...
        <div class="row ui-checkbox-row">
            <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
            <div class="col-sm-8 col-xs-6">
                <label class="ui-checkbox">
                    <input type="checkbox" name="noWidgetHeading" ng-true-value= true ng-false-value= false ngChange="hideWidgetHeading()" ng-click="hideWidgetHeading()" >
                    <span></span>
                </label>
            </div>
        </div>
    </div>
    ...

In the ctrl.js file, I have the following function:

angular.module('app.widget').run(function($templateCache){
    ...
}).controller('WidgetPickerCtrl', function($scope, $timeout, fxTag, gPresets, appWidget){
    ...
    $scope.widget = undefined;
    ...
    $scope.checkboxModel = {
        value1 : true,
        value2 : false
    };
    ...
    var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
    console.log(widgetHeadingCheckbox);
    $scope.$watch('widgetHeadingCheckbox', function(){
        console.log("Value of checkbox has changed: ", widgetHeadingCheckbox);
    });

    function hideWidgetHeading(){
        if(widgetHeadingCheckbox){
            console.log("Value of widgetHeadingCheckbox in 'if': ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        } else {
            console.log("Value of widgetHeadingCheckbox in 'else: ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        }
    }

Currently, when I load the page, and click the button to open the dialog box, the checkbox is displayed on the dialog box unchecked. When I click it, it shows that it is checked, and if I click it again, it becomes unchecked again, as you would expect.

I am trying to use the hideWidgetHeading() JS function above to perform a different action when the dialog box 'Submit' button is pressed, depending on whether the checkbox is selected or not.

At the moment, if I select the checkbox (i.e. it's checked- its value should be true), and click the 'Submit' button on the form, I get the following output in my console:

null

Value of checkbox has changed: null

Value of widgetHeadingCheckbox in else: null

I also get the same output in the console if I click the submit button when the checkbox is not checked...

Why is the value of my checkbox always null... I would expect it to be either true or false, but never null... Do I need to initialise it somewhere? I thought I had already done that in the HTML, when setting its ng-true-value & ng-false-value...