Angular filter in ng-repeat -- show message when no matching results

Question

I have filtering in place that filters the model based on an entry from the user as well as a date comparison. I want to show a message when that filter returns no results. I have seen other answers to this question and I cannot seem to make them work.

Here is how I have my ng-repeat setup:

<div ng-repeat="docs in casedocs | filter: filterDocuments | 
                orderBy: userSort : userSortDirection ">
                    <div style="float:left;padding-right:4px;" class="documentRadios">
                        <input type="radio" ng-model="docviews[0].docID" 
                               ng-show="typeOfLaw != 'CV'" value="{{docs.DocID}}" 
                               ng-change="loadDocument(1, 
                                          '{{docs.Description}}', {{docs.DocID}})" />
                        <input type="radio" ng-model="docviews[1].docID" 
                               ng-show="typeOfLaw != 'CV'" value="{{docs.DocID}}" 
                               ng-change="loadDocument(2,  
                                           '{{docs.Description}}', {{docs.DocID}})" />
                    </div>
                    <div class="documentTitle">
                        <a href ng-click="loadDocument(1, 
                                          docs.Description, docs.Doc_ID)">
                          {{docs.Description}}
                        </a>&nbsp;
                        <span class="documentFilingDate">   
                            ({{docs.DocFilingDate}})
                        </span>
                    </div>
                    <div class="documentIcons">
                        <a href="docview/{{docs.DocID}}" target="_blank">
                           <span class="glyphicon glyphicon-new-window white smaller">
                           </span>
                        </a>
                        <span ng-show="docs.Image_Type_ID == 3" class="glyphicon 
                              glyphicon-search white smaller"></span>
                        <span ng-show="docs.Security_Level > 0" class="glyphicon 
                              glyphicon-lock white smaller"></span>
                        <span ng-show="docs.QC_Review_Status == 1" class="glyphicon 
                              glyphicon-ok white smaller"></span>
                    </div>

                    <div style="clear:both;"></div>
                </div>
                <div class="col-sm-8">
                    <span class="notFound white">{{noDocumentsMsg}}</span>
                </div>
            </div>

According to examples I have found I am supposed to change the ng-repeat declaration as follows:

<div ng-repeat="docs in casedocs = (doc | filter: filterDocuments) 
               | orderBy: userSort : userSortDirection ">

and then use an ng-show based on !casedocs.length but when I add this all filtering breaks. The examples I have seen do not have an orderBy statement. What am I doing wrong here?

Example of answer previously given:

Answer 1

Assuming your data is in $scope.casedocs, try:

<div ng-repeat="docs in filteredCasedocs = (casedocs | filter: filterDocuments | orderBy: userSort : userSortDirection)">
    <!-- your code -->
</div>
<div ng-show="!filteredCasedocs.length">None avaialble</div>