How to show message when nothing in array after being filtered using AngularJS

Question

I am currently showing a list the is grouped in alphabetical order but is showing everything and once you click a, b, c, etc... it filters into just that letter.

But If you click a letter that has nothing in it I want it to have no results found message.

This is what i have tried:

    <ul class="acronym-library-list" ng-repeat="parentItem in acronyms | groupBy:'type':'acronymBytype' | filter:acronymFilter">
        <h2>{{parentItem.type}}</h2>
        <li ng-repeat="item in acronyms | filter: { type: parentItem.type }">
            <div class="col-md-1 acronym">
                {{item.acronym}}
            </div>
            <div class="col-md-11 acronym-title">
                {{item.title}}
            </div> 
        </li>
    </ul>
    <p ng-show="acronyms.length==0">No results found...</p>

I have also tried:

<p ng-show="!acronyms.length">No results found...</p>

Update: This is my array list:

app.controller('AcronymLibrary', function($scope) {

    $scope.acronyms = [
        {type: 'A', acronym: 'AP', title: 'Accounts Payable'},
        {type: 'A', acronym: 'AR', title: 'Accounts Receivable'},
        {type: 'A', acronym: 'ASN', title: 'Advanced Shipping Notice'},
        {type: 'A', acronym: 'ATP', title: 'Available to Promise'},
        {type: 'B', acronym: 'BA', title: 'Business Analyst'},
        {type: 'B', acronym: 'BT', title: 'Business Technology'},
        {type: 'C', acronym: 'CM', title: 'Customer Master'},
        {type: 'D', acronym: 'DBA', title: 'Database Administer'},
        {type: 'D', acronym: 'DC', title: 'Distribution Center'},
        {type: 'E', acronym: 'ECC', title: 'Extended Care Component'},
        {type: 'F', acronym: 'FICO', title: 'Financials & Controlling'},
        {type: 'G', acronym: 'GL', title: 'General Ledger'},
        {type: 'K', acronym: 'KPI', title: 'Key Performance Indicator'}
    ];
});

Answer 1

This is what I ended up with that worked:

    <ul class="acronym-library-list" ng-repeat="parentItem in filtered = (acronyms | groupBy:'type':'acronymBytype' | filter:acronymFilter)">
        <h2>{{parentItem.type}}</h2>
        <li ng-repeat="item in acronyms | filter: { type: parentItem.type }">
            <div class="col-md-1 acronym">
                {{item.acronym}}
            </div>
            <div class="col-md-11 acronym-title">
                {{item.title}}
            </div> 
        </li>
  </ul>
  <div>
     <h3 class="no-results" ng-show="!filtered.length">No results found...</h3>
  </div>