How to show a message when filter returns nothing in ng-repeat - AngularJS

angularjs, angularjs-ng-repeat, javascript

Solution

You can also save your filtered array in a variable and then use that variable inside the `ng-show` expression:

<select ng-model="shade" ng-options="shade for shade in shades"></select><br>
<ul>
    <li ng-repeat="c in filteredColors = (colors | filter:shade)">{{c.name}}</li>
</ul>
<div ng-show="!filteredColors.length">No colors available</div>

You can see it in action in this plunker.

Problem

I would like to show one div(message) when no items returned on filter(ng-repeat). Filter is happening based on select box (ng-model). And there are no results for some select options, at that time user should be able to read a message at same place. Can I use ng-show/hide here? How? Thanks,

Original source