JSFiddle - React, Tailwind, and code Playground

HTML

<md-content ng-app="Example" ng-controller="Example" class="md-padding tasks">
  <div flex="flex"><span ng-class="{active: 'all' === filter.about}" ng-click="select('about', 'all')" class="label label-primary">All</span><span ng-class="{active: filter.about.indexOf('surveys') &gt; -1}" ng-click="select('about', 'surveys')" class="label label-primary">Surveys</span></div>
  <div flex="flex"><span ng-class="{active: 'all' === filter.type}" ng-click="select('type', 'all')" class="label label-primary-2">All</span><span ng-class="{active: filter.type.indexOf('register') &gt; -1}" ng-click="select('type', 'register')" class="label label-primary-2">Register</span>
    <span ng-class="{active: filter.type.indexOf('register+action') &gt; -1}" ng-click="select('type', 'register+action')" class="label label-primary-2">Register + action</span><span ng-class="{active: filter.type.indexOf('action') &gt; -1}" ng-click="select('type', 'action')"
    class="label label-primary-2">Action</span><span ng-class="{active: filter.type.indexOf('install') &gt; -1}" ng-click="select('type', 'install')" class="label label-primary-2">Install</span><span ng-class="{active: filter.type.indexOf('install+action') &gt; -1}"
    ng-click="select('type', 'install+action')" class="label label-primary-2">Install + action</span></div>
  <div flex="flex"><span ng-class="{active: 'all' === filter.for}" ng-click="select('for', 'all')" class="label label-primary-1">All</span><span ng-class="{active: filter.for.indexOf('android') &gt; -1}" ng-click="select('for', 'android')" class="label label-primary-1">Android</span>
    <span ng-class="{active: filter.for.indexOf('ios') &gt; -1}" ng-click="select('for', 'ios')" class="label label-primary-1">iOS</span><span ng-class="{active: filter.for.indexOf('desktop') &gt; -1}" ng-click="select('for', 'desktop')" class="label label-primary-1">Desktop</span></div>
  <div layout-xs="column" layout="row" ng-repeat="task in tasks | multipleFilter:filter"...

CSS

.tasks .label.active {
  opacity: 1;
}

.tasks .label {
  font-size: 15px;
  margin: 5px;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0.7;
}

.label-primary {
  background-color: #3f51b5;
  color: rgba(255, 255, 255, 0.87);
}

.label-primary-2 {
  background: #3facb5;
}

.label-primary-1 {
  background: #b53fb1;
}

.label {
  color: rgba(255, 255, 255, 0.87);
}

.label {
  color: inherit;
}

.label {
  padding: .3em .6em .3em .6em;
}

.label-primary {
  background-color: #337ab7;
}

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  -webkit-border-radius: .25em;
  border-radius: .25em;
}

JavaScript

angular
  .module("Example", [])
  .filter("multipleFilter", multipleFilter)
  .controller("Example", function($scope) {
    $scope.filter = {
      about: "all",
      type: "all",
      for: "all"
    };

    $scope.select = function(type, value) {
      let filter = $scope.filter[type];
      if (value === "all") {
        filter = value;
      } else {
        if (!Array.isArray(filter)) filter = [];

        if (filter.indexOf(value) > -1) delete filter[filter.indexOf(value)];
        else filter.push(value);

        console.log(filter[0]);
        if (!filter[0]) filter = 'all';
      }
      $scope.filter[type] = filter;
      console.log($scope.filter, filter);
    };
    // here data
    $scope.tasks = [{
      "_id": "a",
      "shortId": "offer1",
      "about": "survey",
      "type": "register+action",
      "__v": 0,
      "disabled": false,
      "for": "desktop",
      "country": {
        "iso": "US",
        "link": "http://some",
        "pay": 2.4,
        "name": "Offer 1",
        "description": "Description of offer 1",
        "image": "http://some",
        "_id": "a"
      }
    }, {
      "_id": "1",
      "shortId": "offer2",
      "about": "survey",
      "type": "register+action",
      "__v": 0,
      "disabled": false,
      "for": "desktop",
      "country": {
        "iso": "US",
        "link": "http://some",
        "pay": 2.4,
        "name": "Offer 2",
        "description": "Description of offer 2",
        "image": "http://some",
        "_id": "a"
      }
    }, {
      "_id": "a",
      "shortId": "offer3",
      "about": "survey",
      "type": "register+action",
      "__v": 0,
      "disabled": false,
      "for": "desktop",
      "country": {
        "iso": "US",
        "link": "https://some",
        "pay": 2.4,
        "name": "Offer 3",
        "description": "Offer 3 Description",
        "image": "http://some",
        "_id": "1"
      }
    }]
  })
  // end data

function multipleFilter() {
  return...