How to filter ng-repeat in Angular by certain property value

Question

I'm trying to display an array of objects with ng-repeat but only the ones with the property value of

"category": "Problems"

This is my view

<div class="small-6 large-6 columns" ng-repeat="post in posts | filter: { category: Problems }">
  <span><a href="#/posts/{{getSlug(post.title)}}"><img src='img/posts/{{post.img}}.jpg' /></a></span>
  <div class="category"><a href="#">{{post.category}}</a></div>
  <a class="title" href="#/posts/{{getSlug(post.title)}}">{{post.title}}</a>
  <div class="meta"><span class="date">{{post.date | date:'dd MMMM yyyy'}}</span></div>
</div>

And controller if needed

.controller('PostListController', ['$scope', '$http', function($scope, $http){

    $http.get('data/posts.json').success(function(response){
      $scope.posts = response;
      $scope.getSlug = function(text){
          return text.replace(/\W+/g, '-');
        };
    });
}])

Any idea why this isn't working?

Thanks in advance.

Answer 1

Syntax error, add single quotes around Problems like:

<div class="small-6 large-6 columns" ng-repeat="post in posts | filter: { category: 'Problems'}">

Angular silently determines Problems (as a variable) as undefined instead of throwing a ReferenceError.