title: AngularJS - placeholder for empty result from filter
body: <p>I want to have a place holder, e.g. <code>&lt;No result&gt;</code> when filter result returns empty. Could anyone please help? I don't even know where to start...</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div ng-controller="Ctrl"&gt;
  &lt;h1&gt;My Foo&lt;/h1&gt;
  &lt;ul&gt;
      &lt;li ng-repeat="foo in foos"&gt;
          &lt;a href="#" ng-click="setBarFilter(foo.name)"&gt;{{foo.name}}&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;br /&gt;
  &lt;h1&gt;My Bar&lt;/h1&gt;
  &lt;ul&gt;
      &lt;li ng-repeat="bar in bars | filter:barFilter"&gt;{{bar.name}}&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong>:</p>
  
  <pre><code>function Ctrl($scope) {
  
    $scope.foos = [{
      name: 'Foo 1'
    },{
      name: 'Foo 2'
    },{
      name: 'Foo 3'
    }];
  
    $scope.bars = [{
      name: 'Bar 1',
      foo: 'Foo 1'
    },{
      name: 'Bar 2',
      foo: 'Foo 2'
    }];
  
    $scope.setBarFilter = function(foo_name) {
      $scope.barFilter = {};
      $scope.barFilter.foo = foo_name;
    }
  }
  </code></pre>
  
  <p><strong>jsFiddle</strong>: <a href="http://jsfiddle.net/adrn/PEumV/1/">http://jsfiddle.net/adrn/PEumV/1/</a></p>
  
  <p>Thanks!            </p>