AngularJS: Apply a css class when a filter return no result

Question

I've created a kind of glossary with AngularJS

When i click on an alphabet list buttons, a function (categoryFilterFn), filter the json data by categories. I would like to apply a CSS to the button, when no results is returned by the filter. For example if i click on the Z button, no exist related entry in the json file, so the filter return nothing, and the Z letter button will be set with a white color with css. I don't know how to apply this using ng-clas. The code here:

<div ng-app="essaiApp">
  <section ng-controller="EssaiCtrl">
    <button type="button" ng-repeat="letter in alphabet" ng-click="selectCategory(letter)">
      {{letter}}
    </button>
    <div ng-repeat="item in todo.items | filter:categoryFilterFn">
      {{item.categoria}}
    </div>
  </section>
</div>

the controller:

essaiApp.controller("EssaiCtrl", function ($scope, $filter) {
    $scope.todo = model;
    var selectedCategory = null;

    $scope.selectCategory = function (newCategory) {
        selectedCategory = newCategory;
    }

    $scope.categoryFilterFn = function (polo) {
        return selectedCategory == null ||
            polo.categoria == selectedCategory;
    }

    $scope.alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
});

Answer 1

Save the filtered result:

<div ng-repeat="item in filteredItems = ( todo.items | filter:categoryFilterFn)">

Move selectedCategory to $scope:

$scope.selectedCategory = null;

$scope.selectCategory = function(newCategory) {
  $scope.selectedCategory = newCategory;
}

Use ng-class on the buttons:

ng-class="{ 'no-result': selectedCategory === letter && !filteredItems.length }"

Demo: http://plnkr.co/edit/Gl1i4dLyCCwuorQHB5SS?p=preview