How to filter multiple values (OR operation) in angularJS

I would just create a custom filter. They are not that hard.

angular.module('myFilters', []).  filter('bygenre', function() {    return function(movies,genres) {      var out = [];      // Filter logic here, adding matches to the out var.      return out;    }  });

template:

<h1>Movies</h1><div ng-init="movies = [          {title:'Man on the Moon', genre:'action'},          {title:'Meet the Robinsons', genre:'family'},          {title:'Sphere', genre:'action'}       ];" /><input type="checkbox" ng-model="genrefilters.action" />Action<br /><input type="checkbox" ng-model="genrefilters.family" />Family<br />{{genrefilters.action}}::{{genrefilters.family}}<ul>    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li></ul>

Edit here is the link: Creating Angular Filters

UPDATE: Here is a fiddle that has an exact demo of my suggestion.

You can use a controller function to filter.

function MoviesCtrl($scope) {    $scope.movies = [{name:'Shrek', genre:'Comedy'},                     {name:'Die Hard', genre:'Action'},                     {name:'The Godfather', genre:'Drama'}];    $scope.selectedGenres = ['Action','Drama'];    $scope.filterByGenres = function(movie) {        return ($scope.selectedGenres.indexOf(movie.genre) !== -1);    };}

HTML:

<div ng-controller="MoviesCtrl">    <ul>        <li ng-repeat="movie in movies | filter:filterByGenres">            {{ movie.name }} {{ movie.genre }}        </li>    </ul></div>

Creating a custom filter might be overkill here, you can just pass in a custom comparator, if you have the multiples values like:

$scope.selectedGenres = "Action, Drama"; $scope.containsComparator = function(expected, actual){    return actual.indexOf(expected) > -1;};

then in the filter:

filter:{name:selectedGenres}:containsComparator