Ng-if not hiding element when watched variable turns false

I am trying to hide an element based on the width of the screen and a test variable. I am running into an edge case where the ng-if directive is not properly hiding an element despite the value being false. Here are the relevant code snippets. The console log reports that my elemnt should be visible, however it is not showing up.

$scope.setContents = function(contents) {
    $scope.noteContent=contents;
    $scope.noteVisible=true;
    $scope.hideNoteList();
  }

$scope.checkWindowSize = function() {
    if ( $(window).innerWidth() < 768 ) {
      $scope.smallScreen = true;
      console.log("Window size is small");
      $scope.hideNoteList();
    }
    else {
      $scope.smallScreen = false;
      console.log("Window size is not small");
      $scope.hideNoteList();
    }
  }

$scope.hideNoteList = function () {
    if($scope.smallScreen && $scope.noteVisible){
      $scope.noteListVisible= false;
      console.log("Note List Should be Hiding");
    }
    else {
      console.log("Note List Should be Visible");
      $scope.noteListVisible= true;
    }
  }

$(window).load($scope.checkWindowSize);
  $(window).resize($scope.checkWindowSize);

HTML

<ul class="list-group col-xs-0 col-sm-6 col-md-4 col-lg-3" ng-if="noteListVisible">
<li ng-repeat="note in notes>
  <h2 ng-click="setContents(note.content)"></h2>
</li>