title: AngularJS list not showing - issue with custom filter?
body: <p>I am trying to troubleshoot why my "upcoming events" list does not show? <strong><a href="http://ogmda.com/sandbox/listings.html" rel="nofollow">Live demo here</a></strong> (code shown below) </p>
  
  <p><strong>Here's my AngularJS view:</strong></p>
  
  <pre><code>&lt;body ng-app="listApp"&gt;
  
  &lt;div class="container" ng-controller="EventController"&gt;
  
   &lt;h3&gt;Upcoming events:&lt;/h3&gt;
  
      &lt;ul ng-repeat="event in events | upcomingEvents | limitTo: 2"&gt;
          &lt;li&gt;{{ event.title }}&lt;/li&gt;
          &lt;li&gt;{{ event.start }}&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here's my controller and a custom filter:</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="angularjs/angular.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var app = angular.module('listApp', []);
  
  app.controller('EventController', function($scope, $http){
      $http.get('events.json').success(function(data) { 
              $scope.events = data;
      })
  });
  
      app.filter('upcomingEvents', function () {
       return function (input) {
  
      var upcomingEvents = [];
  
      upcomingEvents = input.filter(function (data) {
          var currentDate = new Date();
  
          if ((data.start - currentDate) &gt;= 0) {
              return true;
          } else {
              return false;
          }
      });
  
      upcomingEvents.sort(function (a, b) {
          return a.start - b.start;
      });
  
      return upcomingEvents;
    };
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Here's my events.json feed:</strong></p>
  
  <pre><code>[
    {
      "title": "All Day Event",
      "start": "2015-07-13",
      "allDay": true
    },
    {
      "title": "Long Event",
      "start": "2015-07-05",
      "end": "2015-07-13"
    },
    {
      "title": "Repeating Event",
      "start": "2015-07-15",
      "allDay": false
    },
    {
        "title": "first time",
        "start": "2015-07-31"
    }
  ]
  </code></pre>
  
  <p>I am getting an error in Chrome's console, but not sure what it means. </p>
  
  <p><strong>Console error:</strong></p>
  
  <pre><code>TypeError: Cannot read property 'filter' of undefined
  at http://ogmda.com/sandbox/listings.html:44:31
  at fn (eval at &lt;anonymous&gt; (http://ogmda.com/sandbox/angularjs/angular.min.js:212:83), &lt;anonymous&gt;:2:191)
  at Object.&lt;anonymous&gt; (http://ogmda.com/sandbox/angularjs/angular.min.js:117:376)
  at n.$get.n.$digest (http://ogmda.com/sandbox/angularjs/angular.min.js:132:124)
  at n.$get.n.$apply (http://ogmda.com/sandbox/angularjs/angular.min.js:135:269)
  at http://ogmda.com/sandbox/angularjs/angular.min.js:19:437
  at Object.e [as invoke] (http://ogmda.com/sandbox/angularjs/angular.min.js:39:156)
  at d (http://ogmda.com/sandbox/angularjs/angular.min.js:19:358)
  at Ac (http://ogmda.com/sandbox/angularjs/angular.min.js:20:151)
  at Zd (http://ogmda.com/sandbox/angularjs/angular.min.js:18:464)
  </code></pre>
  
  <p>Anyone have any advice on how I can proceed to fix? Thanks.</p>