AngularJS - Grid with custom filters using Semantic UI.

var app = angular.module('app', ['ngResource', 'ui.bootstrap']);

app.factory('Photo', [
  '$resource', 
  function ($resource) {
    return $resource('photos.json', {}, {
      query: {
        method: 'GET', 
        isArray: true
      }
    });
  }
]);

app.controller('gridCtrl', [
  '$scope', 
  'Photo', 
  function ($scope, Photo) {
    $scope.test = 'Test Grid';
    $scope.photos = Photo.query();
    $scope.filters = {};
    $scope.filters.category = '*';
  }
]);

app.directive('cardTags', function () {
  return {
    restrict: 'AE',
    templateUrl: 'card-tags.html',
    scope: {
      tagValue: '='
    },
    link: function (scope) {
      scope.tags = scope.tagValue;
    }
  }
});

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8">
    <title>AngularJS - Grid with filter</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-semver="1.3.13" src="//code.angularjs.org/1.3.13/angular.js" data-require="angular.js@1.3.x"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-resource.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
    <script src="app.js"></script>

    <link rel="stylesheet" href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css">
    <link href="style.css" rel="stylesheet">
  </head>

  <body ng-controller="gridCtrl">

    <h1>{{test}} (filter:{{filters.category}})</h1>

    <div class="four fluid ui buttons">
      <a class="tiny ui button" ng-model="filters.category" btn-radio="'*'">All</a>
      <a class="tiny ui button" ng-model="filters.category" btn-radio="'general'">General</a>
      <a class="tiny ui button" ng-model="filters.category" btn-radio="'sports'">Sports</a>
      <a class="tiny ui button" ng-model="filters.category" btn-radio="'nightlife'">Nightlife</a>
    </div>

    <div class="ui divider"></div>

    <div class="ui cards">
      <div class="card" ng-repeat="card in photos | filter:filters.category:strict">
        <div class="image">
          <img ng-src="{{card.src}}">
        </div>
        <div class="content">
          <a class="header">{{card.title}}</a>
          <div class="meta">
            <card-tags tag-value="card.category"></card-tags>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

body {
	background: #eee;
}

[
  {
    "id": "p1",
    "title": "One",
    "src": "http://lorempixel.com/150/150/",
    "info": "photo 1",
    "category": [
      "*",
      "General"
    ]
  },
  {
    "id": "p2",
    "title": "Two",
    "src": "http://lorempixel.com/150/150/sports", 
    "info": "photo 2",
    "category": [
      "*",
      "Sports"
    ]
  },
  {
    "id": "p3",
    "title": "Three",
    "src": "http://lorempixel.com/150/150/nightlife", 
    "info": "photo 3",
    "category": [
      "*",
      "Nightlife"
    ]
  },
  {
    "id": "p4",
    "title": "Four",
    "src": "http://lorempixel.com/150/150/",
    "info": "photo 1",
    "category": [
      "*",
      "General"
    ]
  },
  {
    "id": "p5",
    "title": "Five",
    "src": "http://lorempixel.com/150/150/sports", 
    "info": "photo 2",
    "category": [
      "*",
      "Sports"
    ]
  },
  {
    "id": "p6",
    "title": "Six",
    "src": "http://lorempixel.com/150/150/nightlife", 
    "info": "photo 3",
    "category": [
      "*",
      "Nightlife"
    ]
  }
]

<div class="ui divider"></div>
<div class="ui labels">
  <a class="ui small label" ng-repeat="tag in tags">
    {{tag}}
  </a>
</div>