AngularJS checkbox- how to set its boolean value?

I am using AngularJS to write the front-end of my website, and currently have a number of widgets displayed on a particular page. I am looking to add the functionality to hide the widget heading based on whether or not the user has selected a particular checkbox on a dialog box that is opened when they click one of the buttons on a widget.

The HTML for this checkbox is:

<div data-ng-if="widget.name === 'umw-tag-box'" ng-hide="hideWidgetHeading()">
    ...
    <div class="divider"></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()">
                <span></span>
            </label>
        </div>
    </div>
</div>

The JS is called when the 'Preview' button is clicked on the dialog box:

var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
//if(widgetHeadingCheckbox == true){
console.log("Value of widgetHeadingCheckbox: ", widgetHeadingCheckbox);
if(widgetHeadingCheckbox){
    console.log("if(widgetHeadingCheckbox) statement entered ");
    hideWidgetHeading();
} else {
    console.log("else of if(widgetHeadingCheckbox) statement entered ");
    hideWidgetHeading();
}

$scope.preview = function(e) {
    function hideWidgetHeading(){
        if(widgetHeadingCheckbox){
            console.log("hideWidgetHeading() called (Widget/ctrl.js line 501) ");
            console.log("Value of widgetHeadingCheckbox (should be true): ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        } else {
            console.log("hideWidgetHeading() called (Widget/ctrl.js line 501) ");
            console.log("Value of widgetHeadingCheckbox (should be false): ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        }
    }
    $timeout(function() { previewDisabled = false; }, 500);
};

At the moment, regardless of whether the checkbox is checked or not, when I click the 'Preview' button on the dialog box, the console is displaying the message:

Value of widgetHeadingCheckbox (should be false): null

which tells me that the widgetHeadingCheckbox variable is either not being set correctly, or it's taking the value of the checkbox when the checkbox is declared, but not initialised (i.e. null), and is not being updated when any changes are made to the value of the checkbox...

What is the best way to ensure that my JS function always holds the correct value of the HTML checkbox element, and is updated any time any changes are made to the element in the HTML?