angularjs - using group by and showing-hiding the group div for selected checkbox -

i need able group check boxes based on categories , show group items have been selected , hide others.

but per code , shows , hides checks check boxes of selected category.ow modify fix issue?

i understand because of returning h

here have:

html:

<div ng-controller="datacontroller"> <div> <!--<ul ng-repeat="(key, value) in properties | groupby: 'name'" ng-show='(properties |  filter: filterbycategory)'">-->  <ul ng-repeat="(key,value) in filtered=(properties  | filter:filterbycategory| groupby: 'name') ">    <li>group name: <strong>{{ key }}</strong></li>            <div  ng-repeat="prop in value">             <label>                         <input type="checkbox" ng-model="filter[key]"/>                         <span>{{prop.property}}</span>             </label>           </div>  </ul> 

js:

$scope.filter = {}; $scope.filterbycategory = function (prop) {            return $scope.filter[prop.name] || nofilter($scope.filter);     };       function nofilter(filterobj) {         (var key in filterobj) {              if (filterobj[key]) {                  return false;             }         }         return true;     }   

you ng-repeat checkboxes on prop in value, use grouped key checkbox ng-model.

this means checkboxes of group share same ng-model expression , same scope property - checking 1 of course check others.

i can't tell trying achieve filter object, need use separate ng-model expressions checkboxes let them have separate states.