javascript - angularjs checkboxes show / hide box -

i have issues manage checkboxes , "boxes" containers. idea have list of checkboxes pre-checked. each checkboxes controls "box" container, , when check / uncheck checkbox, shows / hides containers.

here codes

<div class="col-lg-2">     <div class="btn-group" uib-dropdown>          <button type="button" class="btn btn-primary" uib-dropdown-toggle>preferences            <span class="caret"></span>         </button>          <ul role="menu" uib-dropdown-menu="">             <li ng-repeat="product in main.products">                 <input class="mycheck" type="checkbox" id="'{{product.id}}'" checked="'{{product.ischeck}}'"> {{product.name}}</li>         </ul>     </div> </div> 

and here code container boxes

<div class="col-sm-3 connectpanels" ui-sortable="sortableoptions" ng-repeat="product in main.products" id="'{{product.id}}panel'">     <div class="mybox">         <div class="mybox-title">             <h5>{{product.name}}</h5>             <div ibox-tools></div>         </div>         <div class="mybox-content">             <h2><img ng-src="{{product.images}}" />                         {{product.type}}             </h2>             <p>{{product.description}}</p>         </div>     </div> </div> 

i've tried various ways; ng-click, ng-show, ng-hide , ng-change each time block manage product id , ischeck values together.

thank in advance

the problem you're not using ng-model on input type checkbox element data-binding angular figure out going on.

if bind input element ng-model directive instead of checked attribute works because ng-model directive two-way data binding , angular dirty checks previous value of ng-model , updates dom respectively if value has changed.

check below code snippet.

angular    .module('demo', [])    .controller('defaultcontroller', defaultcontroller);        function defaultcontroller() {      var vm = this;      vm.main = {      	products: [        	{ id: 1, ischeck: true, name: 'product 1', type: 'product type 1', description: 'product 1 desc', images: '' },          { id: 2, ischeck: true, name: 'product 2', type: 'product type 2', description: 'product 2 desc', images: '' },          { id: 3, ischeck: true, name: 'product 3', type: 'product type 3', description: 'product 3 desc', images: '' }        ]      };    }    

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="demo">    <div ng-controller="defaultcontroller ctrl">      <div class="col-lg-2">        <div class="btn-group" uib-dropdown>          <button type="button" class="btn btn-primary" uib-dropdown-toggle>preferences             <span class="caret"></span>          </button>            <ul role="menu" uib-dropdown-menu="">            <li ng-repeat="product in ctrl.main.products">              <input class="mycheck" type="checkbox" id="'{{product.id}}'" ng-model="product.ischeck"/>              {{product.name}}            </li>          </ul>                    <div class="col-sm-3 connectpanels"           ui-sortable="sortableoptions"           ng-repeat="product in ctrl.main.products" id="'{{product.id}}panel'" ng-show="product.ischeck">            <div class="mybox">              <div class="mybox-title">                <h5>{{product.name}}</h5>                <div ibox-tools></div>              </div>              <div class="mybox-content">                <h2>                  <img ng-src="{{product.images}}" />                  {{product.type}}                </h2>                <p>{{product.description}}</p>              </div>            </div>          </div>        </div>      </div>    </div>  </div>