How to detect if Angular ng-repeat is showing result or not

Question

I just want to show "No result" message when I type something into the search field and there is no match. Currently the filter works but when I type a keyword that doesn't give a result it doesn't show a "no result" message. How to do that?

<div class="portfolio-list-wrap" ng-controller="LatestProjectCtrl">
<input type="text" ng-model="search.$"/>
<div class="portfolio-thumb" ng-repeat="work in works.project | filter:search">
    <img src="images/{{work.string}}.jpg" alt="{{work.name}}"/>
    <h4>{{work.name}}</h4>
    <i>{{work.date}}</i>
</div>
</div>

and here is how I did my factory

var myApp = angular.module('myApp', []);


myApp.factory('Works', function(){

var Works = {}

Works.project =[
    {
        name : "project1",
        string : "projectstring1",
        date: "17 August 2012"
    },
    {
        name : "project2",
        string : "projectstring2",
        date: "12 December 2013"
    },
    {
        name : "project3",
        string : "projectstring3",
        date: "17 September 2012"
    },
    {
        name : "project3",
        string : "projectstring4",
        date: "17 August 2012"
    },
];  
return Works;
})



function LatestProjectCtrl($scope, Works){
$scope.works = Works;
}

Answer 1

You can show a message saying that there is no results like this:

<span ng-show="(projects | filter:query).length == 0">No results</span>

For complete example please see the code snippet below:

function Ctrl($scope) {
  $scope.projects = [
      {
        name: "Sunny project 1",
        date: "17.3.2016",
        image: "pr1"
      },
      {
        name: "Windy project 2",
        date: "18.03.2016",
        image: "pr2"
      },
      {
        name: "Cloudy project 3",
        date: "19.03.2016",
        image: "pr3"
      }
    ]
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="Ctrl">
    <input type="text" ng-model="query" />
    <div class="portfolio-thumb" ng-repeat="project in projects | filter:query">
      <h4>{{project.name}}</h4>
      <ul>
        <li>{{project.date}}</li>
        <li>Img source = '{{project.image}}.jpg'</li>
      </ul>
    </div>
    <div ng-show="(projects | filter:query).length == 0">No results</div>
  </div>
</div>

Answer 2

try this.

<div class="portfolio-thumb" ng-repeat="work in filteredList = (works.project | filter:search)">
    <img src="images/{{work.string}}.jpg" alt="{{work.name}}"/>
    <h4>{{work.name}}</h4>
    <i>{{work.date}}</i>

</div>
<span ng-hide="filteredList.length"> No result</span>

JSFiddle

Update:

Even more elegant is to use

 <span ng-hide="filteredList"> No result</span>

JSFiddle