Angular ng-if not responding as expected

I have li elements that have an ng-if statement that is tied to a checkbox. If I physically check the checkbox, the ng-if responds as expected. However, if I check or uncheck the checkbox via JavaScript, the checkboxes get checked or unchecked as expected, but the ng-if does not respond. Is this working as it should? Is there a better way to do this?

Thanks

Here are my code samples: "[]" = "<>" HTML - Part 1

[li id="homebutton" ng-if="homechecked != true" onclick="homeclicked()"][a ng-href="/"][img src="images\Neck01Home.png" alt="Home" /][/a]

[li id="thebandbutton" ng-if="homechecked===true" onclick="thebandclicked()"][a ng-href="/theband/"][img src="images\Neck01TheBand.png" alt="The Band" /][/a]

HTML - Part 2

[label class="menucontroller"]Home2: [input class="menucontroller" id="homecb" type="checkbox" ng-model="homechecked" ng-init="homechecked=true" /][/label][br /]

[label class="menucontroller"]TheBand2: [input class="menucontroller" id="bandcb" type="checkbox" ng-model="thebandchecked" /][/labe][

[label class="menucontroller"]Gallery2: [input class="menucontroller" id="gallerycb" type="checkbox" ng-model="gallerychecked" /][/label][br /]

JavaScript window.onload = function () {

}

function homeclicked() {

document.getElementById('homecb').checked = true;
document.getElementById('bandcb').checked = false;
document.getElementById('gallerycb').checked = false;

}

function thebandclicked() {

document.getElementById('homecb').checked = false;
document.getElementById('bandcb').checked = true;
document.getElementById('gallerycb').checked = false;

}

function galleryclicked() {

document.getElementById('homecb').checked = false;
document.getElementById('bandcb').checked = false;
document.getElementById('gallerycb').checked = true;

}