AngularJS: Filtering json objects instead of array

Question

Since the filters provided by AngularJS only work with arrays, but not with objects, I use the filter function proposed in this solution .

Now I want to expand it, because my json data additionally has an object object that stores visibility data for filtering (unfortunately, I cannot change the json structure):

$scope.data = {
      "groups":{
        "1": {
          "type": "foo",
          "name": "blah", 
          "settings": {
            "visibility":[true]
          }
        },
        "2": {
          "type": "bar", 
          "settings": {
            "visibility":[false]
          }
        }
      }
}

Therefore, my filter call is more complicated, but, of course, does not work with the filter at the moment:

<div ng-repeat="(key, value) in data.groups | objectByKeyValFilter:'settings.visible[0]':true>
    {{key}} {{value.type}}
</div>

maybe

objectByKeyValFilter:'settings.visibility[0]' : true

something like this becomes erroneous

myObject['settings.visibility[0]']

How can I change the filter function to achieve filtering?

Plunker does not work: http://plnkr.co/edit/f202lA?p=preview

Answer 1

, : plnkr

 <div ng-repeat="(key, value) in data.groups ">
       <span ng-show="value.settings.visible">
        {{key}} {{value.type}}
        <span>


      </div> 

Answer 2

, http://plnkr.co/edit/MgltNXw0x2KWcmWm6QeA?p=preview

<div ng-controller ="test">
      <div ng-repeat="(key, value) in data.groups | objectByKeyValFilter:'settings.visible':'true'">
        {{key}} {{value.type}}
      </div> 
    </div> 

true false

JS:

angular.module('app').filter('objectByKeyValFilter', function() {
  return function(input, filterKey, filterVal) {


    var filteredInput = [];
    angular.forEach(input, function(value, key) {

      if (value.settings.visible == filterVal) {


        filteredInput.push(value);
      }

    });

    return filteredInput;
  }
});