<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <link rel="stylesheet" href="style.css">
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
    <script src="script.js"></script>
  </head>

  <body class="container">
    <div  ng-controller="myCtrl as vm">
      
      <div class="row">
        <div class="col-md-4">          
          <!-- Radio Button Gender -->
          <form name="vm.frmGender" class="well">
            <h4>Gender</h4>
            
            <div ng-class="{false: 'text-danger', true: 'text-success'}[vm.frmGender.$valid]">
              Is Valid: {{vm.frmGender.$valid}}
              , Gender: {{vm.gender}}</div>
            <ul class="list-group">              
              <li class="list-group-item"><label><input type="radio" 
                    name= "gender" 
                    value="Male" 
                    ng-model="vm.gender" 
                    required /> Male</label></li>
              <li class="list-group-item"><label><input type="radio" 
                    name= "gender" 
                    value="Female" 
                    ng-model="vm.gender" 
                    required  /> Female</label></li>
            </ul>
            <div>It is required to provide the gender information.</div>
          </form>
        </div>
        
         <!-- Animals -->
        <div class="col-md-4">         
            <form name="vm.frmOne" class="well">
              <h4 class="row col-md-12">
                At least one is required:
              </h3>
              <div class="row">
                <div class="col-md-12" ng-class="{false: 'text-danger', true: 'text-success'}[vm.frmOne.$valid]">
                      Is Valid: {{vm.frmOne.$valid}}, 
                      Selected : {{vm.selectedAnimals}}
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <ul  class="list-group">
                    <li ng-repeat='a in vm.animals' class="list-group-item">
                        <label><input type="checkbox"
                            ng-model="xyx"
                            ng-click="vm.toggleAnimal(a)"
                            ng-checked="vm.selectedAnimals.indexOf(a) > -1"
                            ng-required="vm.selectedAnimals.length == 0" /> 
                            {{a}}</label>
                      </li>                  
                   </ul>
                </div>            
               </div>
              <div >At least one animal should be selected but you can select any number of animals from the list, to test un-select all and see the id valid</div>

              </form>
            </div>
            <div class="col-md-4">
              <form name="vm.frmColor" class=" well">
                <h4 class="row col-md-12">
                  At least 3 is required:
                </h3>
                <div class="row">
                  <div class="col-md-12" ng-class="{false: 'text-danger', true: 'text-success'}[vm.frmColor.$valid]">
                      Is Valid: {{vm.frmColor.$valid}}<br>
                      Selected :{{vm.selectedColors}}
                  </div>
                </div>
                
                <div class="row">
                  <div class="col-md-12">
                      <label><input type="checkbox" 
                                    ng-model="vm.chkAll"
                                    ng-checked="vm.colors.length === vm.selectedColors.length"
                                    ng-click="vm.selectAllColors()" > Select/Clear All</label>
                  </div>
                </div>
                <div class="row">
                  <ulclass="list-group">
                    <li class="list-group-item" 
                        ng-repeat="item in vm.colors">
                       <label> <input type="checkbox"
                               ng-model="xyz"
                               ng-checked="vm.selectedColors.indexOf(item.id) > -1"
                               ng-click="vm.toggleColor(item.id)"
                               ng-required="vm.selectedColors.length < 3"> {{item.color}}</label> 
                    </li>
                  </ul>
                </div>
                
                <div class='row'>
                  <div class="col-md-12">
                    At least 3 items are required but you can select as many as you want<br>
                    Select all or clear all is used to select/deselect every items in the list
                  </div>
                </div>
              </form>
            </div>
          </div>
    </div>
    
  </body>

</html>
// Code goes here

var app = angular.module('myapp', []);
app.controller('myCtrl', function(){
  var vm = this;
  
  vm.selectedColors = [];
  vm.colors = [{"id": 1, "color": "Red"},
          {"id": 2, "color": "Orange"},
          {"id": 3, "color": "Yellow"},
          {"id": 4, "color": "Green"},
          {"id": 5, "color": "Cyan"},
          {"id": 6, "color": "Blue"},
          {"id": 7, "color": "Indigo"}];
          
  vm.toggleColor = function(id){
    var index = vm.selectedColors.indexOf(id);
    if(index == -1) {
      vm.selectedColors.push(id);
    }
    else{
      vm.selectedColors.splice(index, 1);
    } 
  }
  
  vm.selectAllColors = function(){   
    if(vm.chkAll == true)
       vm.selectedColors = vm.colors.map(x=>x.id)
    else
      vm.selectedColors = [];
  }
  
  /***** Animals ****/
  vm.selectedAnimals = ['Bear', 'Deer'];
  vm.animals = ['Cat', 'Bear', 'Deer', 'Lion', 'Tiger'];
  vm.toggleAnimal = function(animal){
    var index = vm.selectedAnimals.indexOf(animal);
    if(index == -1) {
      vm.selectedAnimals.push(animal);
    }
    else{
      vm.selectedAnimals.splice(index, 1);
    }
  }
})
/* Styles go here */
table tr td{
  border: 1px solid #bbb;
  padding: 10px 30px;
  vertical-align: top;
  white-space:nowrap;
}