AngularJS: How to only show items in json file that have a certain value(s) based on a nested array of a variable -

please note: first angular application apologize if i'm asking wrong or silly question.

i'm using ng-repeat list data items present in json file. want able list data (ng-show) necessary different partials of spa. site personal website family recipes. upon button click want able list dessert foods, etc. have working, i'm using multiple json files duplicated data accomplish (dirty data?). goal have 1 json file whole site.

here example of 1 variable or "dish" in data set:

{     "name": "pecan pie",     "shortname": "pecan-pie",     "type": [         "dessert",         "holidaydish"     ],     "contributor": "mark",     "totalt": "1h 5m",     "ingredients": "1 cup light brown sugar",     "steps": "preheat oven 400 degrees.", }, 

i'm trying show data based on nested array value: "type"

html in partials calling each variable in json file:

(this have been failing use ng-show show variables or "dishes" have dessert / etc. in nested type array)

<li class="dishlistli" ng-repeat="item in dish | filter: query | orderby: dishorder:direction">   <a href="#/allcards/{{dish.indexof(item)}}">     <div>       <h2>{{item.name}}</h2></div>   </a> </li> 

ex controller partial:

dishcontrollers.controller('allcardscontroller', ['$scope', '$http', '$routeparams', function($scope, $http, $routeparams) {   $http.get('js/all.json').success(function(data) {     $scope.isvisible = false;     $scope.showhide = function() {       $scope.isvisible = $scope.isvisible ? false : true;     }      $scope.dish = data;     $scope.whichitem = $routeparams.itemid;      if ($routeparams.itemid > 0) {       $scope.previtem = number($routeparams.itemid) - 1;     } else {       $scope.previtem = $scope.dish.length - 1;     }      if ($routeparams.itemid < $scope.dish.length - 1) {       $scope.nextitem = number($routeparams.itemid) + 1;     } else {       $scope.nextitem = 0;     }   }); }]); 

any time , appreciated. let me know if i'm missing necessary information.

the working version of app (using multiple json files) at: http://clarkecookbook.com/#/all

i can continue use multiple json files, know how right.

demo ther : http://plnkr.co/edit/qlwfnkodxjoj5pjpczyq?p=preview

try in view :

<input ng-model="query"/> <ul>   <li ng-repeat="e in list | filter: {type: query}">     {{e.name}}  (type: {{e.type}})   </li> </ul>