title: angularjs checkboxes show / hide box
body: <p>I have some issues to manage checkboxes and "boxes" containers. The idea is to have a list of checkboxes pre-checked.
  Each checkboxes controls a "box" container, and when check / uncheck the checkbox, it shows / hides the containers.</p>
  
  <p>here some codes</p>
  
  <pre><code>&lt;div class="col-lg-2"&gt;
      &lt;div class="btn-group" uib-dropdown&gt;
  
          &lt;button type="button" class="btn btn-primary" uib-dropdown-toggle&gt;Preferences 
            &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;ul role="menu" uib-dropdown-menu=""&gt;
              &lt;li ng-repeat="product in main.products"&gt;
                  &lt;input class="mycheck" type="checkbox" id="'{{product.id}}'" checked="'{{product.ischeck}}'"&gt; {{product.name}}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the code for the container boxes</p>
  
  <pre><code>&lt;div class="col-sm-3 connectPanels" ui-sortable="sortableOptions" ng-repeat="product in main.products" id="'{{product.id}}Panel'"&gt;
      &lt;div class="mybox"&gt;
          &lt;div class="mybox-title"&gt;
              &lt;h5&gt;{{product.name}}&lt;/h5&gt;
              &lt;div ibox-tools&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="mybox-content"&gt;
              &lt;h2&gt;&lt;img ng-src="{{product.images}}" /&gt;
                          {{product.type}}
              &lt;/h2&gt;
              &lt;p&gt;{{product.description}}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried various ways; ng-click, ng-show, ng-hide and ng-change but each time I am block to manage to get the product Id and ischeck values together.</p>
  
  <p>Thank you in advance</p>