How to ngShow a div when filtered search bar returns nothing?

first I'll provide background info then show some code snippets.

1. I have an ng-repeat that is repeating box-like widgets with data/information inside.

2. I have a search bar that filters the data in the widgets and only shows widgets that contain the string in the search bar.

3. With number 2 in mind, when a string is entered that is not in any of the widgets, it leaves the page blank with no widgets. (it makes widgets without that string disappear)

What I want: is to show a div when no result is returned instead of having a blank page.

For the sake of examples, I have:

<input type = "text" data-ng-model = "searchWidgets" />

<div id="main-content-body" data-ng-repeat="widget in widgets | filter:searchWidgets">

    <div id="falsy-search" ng-show="!searchWidgets.length">
        <h1 id="inset-message" class="text-center">No Results Found</h1>
    </div>

    <section>
        (this is where all the widgets get displayed)
    </section>

</div>

Thank you in advance for your time and input!