Angular JS's ng-if and watches

I am currently working on a reading list based on NLP, where people can search for topics and get relevant and similar documents. I added a checkbox that toggles displaying all the documents. I was watching on the model ‘isSelectAll’

<div class="switch">
    <label>
        De-select All
        <input type="checkbox" ng-model="isSelectAll">
        <span class="lever"></span>
        Select All
    </label>
</div>

$scope.$watch('isSelectAll', function (newVal) {
    if ($scope.matchedTopics) {
        if (newVal) {
            $scope.selectAll();
        } else {
            $scope.deSelectAll();
        }
    }
});

But for some reason the watch was not getting triggered when I clicked on the checkbox. That was almost impossible, I was breaking my head for a few hours and then finally figured out why.

I had a search bar which gets the documents based on query, and before fetch, all the other elements were under ng-if false. This makes those elements render only after getting data.

<div class="row" ng-if="matchedTopics.length">
    <!-- everything including checkbox -->
</div>

Turns out, apart from creating the html elements(which makes sense), the two way bindings are also not setup. So if some elements are under ng-if false and later becomes true, the bindings are messed up.

So to overcome this I had to make ng-if to ng-show. But I just thought that ng-if improves performance by not rendering contents till they are needed. Oh well ng-show wins this time.