var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.workspaces = [
{name: "Bar", id: "1"},
{name: "Service", id: "2"},
{name: "Cleaning", id: "3"}
]
$scope.workspaces2 = [
{name: "Cleaning", id: "3"},
{name: "Service", id: "2"}
]
$scope.employees = [
{name:"Harald", workspaces:[{id:"1"}, {id:"2"}]},
{name:"Peter", workspaces:[{id:"2"}, {id:"1"}, {id:"3"}]},
{name:"Eugen", workspaces:[{id:"3"}], different:[{id:"1"}]}
]
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.8/angular.js" data-semver="1.2.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="workspace in workspaces">
<input type="radio" ng-model="$parent.filtering.workspaces" value="{{workspace.id}}">{{workspace}}</input>
</div><br>
<div ng-repeat="workspace in workspaces2">
<input type="radio" ng-model="$parent.filtering.workspaces" value="{{workspace.id}}">{{workspace}}</input>
</div>
<p>Debug Search Object: {{filtering}}</p>
<ul title="Employees">
<li ng-repeat="e in employees | filter:filtering">{{e}}</il>
</ul>
</body>
</html>
/* Put your css in here */