angularjs - show checkbox elements of an array of checkboxes -

i have got set of radiobuttons , array of checkboxes. when click radiobutton1 should load first checkbox element array , when click radiobutton2 should load remaining 3 checkbox elements array.but shows 4 checkboxes in both cases. tried this.

in html

    <form>     <label class="radio-inline" >     <input value="1" type="radio" ng-model="radioption" >rb1</label>     <label class="radio-inline">     <input value="2" type="radio" ng-model="radioption" >rb2</label>      <div class="">     <label ng-repeat="channel in channels | filter:myfilter" >     <input  type="checkbox" name="selectedchannels[]"   value="{{channel.value}}"                    ng-model="channel.selected"  >{{channel.name}}     </label></div>      </form> 

in controller

app.controller('reportcontroller', ['$scope', 'report',  function($scope, report){           var self = this; $scope.channels = [{ name: 'a', selected: false, value: '1',visible:false },                    { name: 'b', selected: false, value: '2' ,visible:false},                    { name: 'c', selected: false, value: '3' ,visible:false},                    { name: 'd', selected: false, value: '4' ,visible:false}                   ];     $scope.selection = [];          $scope.selectedchannels = function selectedchannels() {          return report($scope.channels, { selected: true } );         };          $scope.$watch('channels|filter:{selected:true}', function (new) {          $scope.selection = new.map(function (channel) {               return channel.value;             });           }, true);            $scope.myfilter = function(){           if ($scope.radioption == '1'){                 return $scope.channels[0].visible = true;         }      else if ($scope.radioption == '2'){                 return [$scope.channels[1],{ visible: true },                        $scope.channels[2],{ visible: true },                        $scope.channels[3],{ visible: true }];         }         });  }]); 

i think should approach problem differently if want use filter try this

$scope.myfilter = function (channel) {     if ($scope.radioption == 1) {         if (channel.name == 'a') {             return true;         }         else {             return false;         }     }     else if ($scope.radioption == 2) {          if (channel.name == 'a') {             return false;         }         else {             return true;         }     }     else {         return false;     } } 

or can add radioption column channels array

$scope.channels = [{ name: 'a', selected: false, value: '1', radioption: 1 },            { name: 'b', selected: false, value: '2', radioption: 2 },            { name: 'c', selected: false, value: '3', radioption: 2 },            { name: 'd', selected: false, value: '4', radioption: 2 } ]; 

and use ng-show

<input type="checkbox" ng-show="channel.radioption == radioption" name="selectedchannels[]" value="{{channel.value}}"    ng-model="channel.selected">{{channel.name}}