<div>
<a href="http://codepen.io/robjurd/pen/jqELyz?editors=1010#0" rel="ugc">http://codepen.io/robjurd/pen/jqELyz?editors=1010#0</a> 
 
i ended up using the filter binding to get it working for you. 
 
html 

<pre><code class="code-10 nolinks" id="code-20-41486460-1">&lt;html ng-app=&quot;app&quot;&gt;
 &lt;head&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action=&quot;&quot; name=&quot;testform&quot; ng-controller=&quot;DataController&quot;&gt;
 &lt;select name=&quot;groups&quot; id=&quot;grp&quot; ng-model=&quot;selectedGroup&quot; ng-change=&quot;selectGroup()&quot;&gt;
 &lt;option ng-repeat=&quot;option in data.groups&quot; value=&quot;{{option}}&quot;&gt;{{option.name}}&lt;/option&gt;
 &lt;/select&gt;
 &lt;select name=&quot;vehicles&quot; id=&quot;veh&quot; ng-model=&quot;selectedVehicle&quot;&gt;
 &lt;option ng-repeat=&quot;option in data.vehicles | filter: myfilter&quot; value=&quot;{{option}}&quot;&gt;{{option.make}}&lt;/option&gt;
 &lt;/select&gt;
 &lt;/form&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
 
javascript 

<pre><code class="code-10 nolinks" id="code-20-41486460-2">angular.module('app', [])
 .controller('DataController', ['$scope', function($scope) {
 $scope.data = {
 vehicles: [
 {&quot;id&quot;: 1, &quot;make&quot;: &quot;Ford&quot;, &quot;seats&quot;: 4},
 {&quot;id&quot;: 2, &quot;make&quot;: &quot;Tata&quot;, &quot;seats&quot;: 2},
 {&quot;id&quot;: 3, &quot;make&quot;: &quot;Toyota&quot;, &quot;seats&quot;: 12},
 {&quot;id&quot;: 4, &quot;make&quot;: &quot;Dodge&quot;, &quot;seats&quot;: 4}
 ]
 ,
 groups: [
 {&quot;id&quot;: 1, &quot;name&quot;: &quot;utility&quot;, &quot;members&quot;: [{&quot;id&quot;: 3},{&quot;id&quot;: 4}]},
 {&quot;id&quot;: 2, &quot;name&quot;: &quot;vacation&quot;, &quot;members&quot;: [{&quot;id&quot;: 2}]}, 
 {&quot;id&quot;: 3, &quot;name&quot;: &quot;general&quot;, &quot;members&quot;: [{&quot;id&quot;: 1}]}
 ]
 };
 $scope.myfilter = function(val, i, a) {
 var m = false;
 var grp = angular.fromJson($scope.selectedGroup);
 angular.forEach(grp.members, function(v, k) {
 if (val.id == v.id) {
 m = true;
 }
 }, m);
 return m;
 };
 $scope.selectedVehicle = {};
 $scope.selectedGroup = 0;
 }]);
</code></pre>
</div>

<div>
This is great - very helpful, and thanks for responding so quickly. &nbsp; 
 
I updated the code to display all vehicles when none were selected (see addition of `$scope.showAll` lines), but with a dropdown select box, you're not given the option to unselect a group (and thus see all vehicles again) after selecting one. &nbsp;How would you do it if you were going to do a list with a selectable div (without needing to add a parent group to which all groups are assigned as members. &nbsp;or would i need to if trying to emulate that screen shot?)? &nbsp;See the attached image. &nbsp; 
 
&nbsp;- Note I would also like to work in group nesting, but do not have a JSON structure to refer to for that yet - if you can suggest how I should structure my data and update the controller to include that, that would be great, but I can post that in another question 
 
&nbsp;- Note also that working in Ionic, I'd like for the filter to be enclosed in a side menu, which will likely have its own scope and controller. &nbsp;I'm unclear how to get a filter that works in one controller to communicate with data from another. &nbsp;If you can address that as well that'd be great, but that could also make another question as well. 
 
Many thanks again. 
 

<pre><code class="code-10 nolinks" id="code-20-41487024-1"> $scope.myFilter = function(val, i, a) {
 if($scope.showAll){return true;}
 var m = false;
 var grp = angular.fromJson($scope.selectedGroup);
 angular.forEach(grp.members, function(v, k){
 if(val.ID == v.ID){
 m = true;
 }
 }, m);
 return m;
 };
 
 $scope.showAll = true
 $scope.selectedVehicle = {};
 $scope.groupid = 0;
 $scope.selectedGroup = {};
 $scope.selectGroup = function(){
 var grp = [];
 angular.forEach($scope.groups, function(v,i){
 if($scope.groupid == v.ID){
 $scope.selectedGroup = v;
 $scope.showAll = false;
 }
 })
 }
</code></pre>
</div>

<div>
Your solution as posted responds to the issue I was having as described in my initial message - I've accepted it as the solution. &nbsp;If you could follow up to the questions I ask in my response above that'd be great, but I understand they weren't spelled out in the initial post. &nbsp;Also, could you explain what's going on in $scope.myFilter? &nbsp;Why does it have &quot;i&quot; and &quot;a&quot; as parameters?
</div>

<div>
Sorry it's taken me so long to get back to you. &nbsp;Thanks for the points and yes I'll answer shortly regarding your concerns.
</div>

<div>
(btw - seems the screenshot didn't come through) 
 
$scope.showAll was a great addition. &nbsp;You could also do this by adding an &lt;option&gt; with a value of 0. &nbsp;Then in the filter test if $scope.groupid is 0 and return true if it is: 
 
&lt;option value=&quot;0&quot;&gt;Show All&lt;/option&gt; 
 
$scope.myfilter = function(val, i, a) { 
&nbsp; &nbsp; &nbsp; if ($scope.groupid==0) { 
&nbsp; &nbsp; &nbsp; &nbsp; return true; 
&nbsp; &nbsp; &nbsp; } 
... 
 
If you wanted to do a multi select, then it would just be a matter of looping through the selected values and comparing them in the same filter. 
 
Both of the following should be additional questions. &nbsp;The would be info others would look for on their own merits so better to separate them. 
 

<blockquote>
- Note I would also like to work in group nesting, but do not have a JSON structure to refer to for that yet - if you can suggest how I should structure my data and update the controller to include that, that would be great, but I can post that in another question 
</blockquote>
 

<blockquote>
- Note also that working in Ionic, I'd like for the filter to be enclosed in a side menu, which will likely have its own scope and controller. &nbsp;I'm unclear how to get a filter that works in one controller to communicate with data from another. &nbsp;If you can address that as well that'd be great, but that could also make another question as well.
</blockquote>
</div>

<div>
Your answer about adding a value to the checkbox for &quot;All Values&quot; was very helpful - I've included that in my code. &nbsp;Thanks also for the suggestion on posting the other issues as separate questions - am in the process of doing so. &nbsp; 
 
I posted my question regarding restructuring the filter as a selectable div (as a multi-select checkbox actually) here: &nbsp;<a href="https://www.experts-exchange.com/questions/28932875/Angular-Ionic-Javascript-filter-works-as-dropdown-can't-get-to-work-as-checkbox.html" rel="ugc">https://www.experts-exchange.com/questions/28932875/Angular-Ionic-Javascript-filter-works-as-dropdown-can't-get-to-work-as-checkbox.html</a>. &nbsp;Any thoughts on that appreciated, but again, this has already been very helpful.
</div>

<div>
<div class="content wysiwyg-content">
I have an app I'm building in Ionic using Angular, and am having difficulty incorporating a filter of assets by the groups those assets are associated with. &nbsp; 
 
&quot;vehicles&quot;: [ 
&nbsp; &nbsp; {&quot;id&quot;: 1, &quot;make&quot;: &quot;Ford&quot;, &quot;seats&quot;: 4}, 
&nbsp; &nbsp; {&quot;id&quot;: 2, &quot;make&quot;: &quot;Tata&quot;, &quot;seats&quot;: 2}, 
&nbsp; &nbsp; {&quot;id&quot;: 3, &quot;make&quot;: &quot;Toyota&quot;, &quot;seats&quot;: 12} 
&nbsp; &nbsp; {&quot;id&quot;: 4, &quot;make&quot;: &quot;Dodge&quot;, &quot;seats&quot;: 4} 
] 
and 
 
&quot;groups&quot;:[ 
&nbsp; &nbsp; &nbsp; &nbsp; {&quot;id&quot;: 1, &quot;name&quot;: &quot;utility&quot;, &quot;members&quot;: [{&quot;id&quot;: 3},{&quot;id&quot;: 4}]}, 
&nbsp; &nbsp; &nbsp; &nbsp; {&quot;id&quot;: 2, &quot;name&quot;: &quot;vacation&quot;, &quot;members&quot;: [{&quot;id&quot;: 2}]}, 
&nbsp; &nbsp; &nbsp; &nbsp; {&quot;id&quot;: 3, &quot;name&quot;: &quot;general&quot;, &quot;members&quot;: [{&quot;id&quot;: 1}]} 
] 
 
I'm getting my data via a service, and want to filter my vehicles based on a selection among the listed groups (so if I select &quot;utility&quot; vehicles, only the Dodge and Toyota will show up). &nbsp;Further, I'd also like it to display all vehicles if no groups are selected. &nbsp; 
 
I'd like to do this without using any nested loops if possible. &nbsp;Also, this SO thread seems very similar: <a href="http://stackoverflow.com/questions/21690721/filtering-ng-repeat-list-using-checkboxes-and-angularjs" rel="ugc">http://stackoverflow.com/questions/21690721/filtering-ng-repeat-list-using-checkboxes-and-angularjs</a>, but I haven't been able to get it to work yet. &nbsp;Any suggestions?
</div>
</div>

I have an app I'm building in Ionic using Angular, and am having difficulty incorporating a filter of assets by the groups those assets are associated with.  

"vehicles": [
    {"id": 1, "make": "Ford", "seats": 4},
    {"id": 2, "make": "Tata", "seats": 2},
    {"id": 3, "make": "Toyota", "seats": 12}
    {"id": 4, "make": "Dodge", "seats": 4}
]
and

"groups":[
        {"id": 1, "name": "utility", "members": [{"id": 3},{"id": 4}]},
        {"id": 2, "name": "vacation", "members": [{"id": 2}]}, 
        {"id": 3, "name": "general", "members": [{"id": 1}]}
]

I'm getting my data via a service, and want to filter my vehicles based on a selection among the listed groups (so if I select "utility" vehicles, only the Dodge and Toyota will show up).  Further, I'd also like it to display all vehicles if no groups are selected.  

I'd like to do this without using any nested loops if possible.  Also, this SO thread seems very similar: http://stackoverflow.com/questions/21690721/filtering-ng-repeat-list-using-checkboxes-and-angularjs, but I haven't been able to get it to work yet.  Any suggestions?

Angular filtering multi-dimensional object by another object

Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Angular

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

JavaScript Object Notation, or JSON, is human-readable text used when transmitting data objects consisting of attribute:value pairs between a server and a web application as an alternative to XML. JSON, while it is originally derived from JavaScript, is a language-independent data format. Code for parsing and generating JSON data is available in many programming languages.