title: How can I get checked checkbox values in Angularjs?
body: <p>I have Mobile brand with Models. Here when I submit I am getting only model name. Instead of that, I need selected brand name and model name and entered price. I have made schema like this.</p>
  
  <p>How can I make output data like this</p>
  
  <pre><code>Categories :
  
  nokia
  
  sub Categories :Nokia Lumia 730 -7,000,
                  Nokia 225 -5,000,
                  Nokia Lumia 1020 -6,000,
                  Nokia Lumia 530 -8,0000
  
  Samsung
  sub Categories:
                  Samsung Galaxy A7 -10,000,
                  Samsung Galaxy A3 -12,000,
                  Samsung Galaxy One5 -5,000,
                  Samsung Galaxy S5 Neo -6,000
  
  HTC
  sub Categories:
  
                  HTC One M9s -9,000,
                  HTC Desire 728G -12,000,
                  HTC Desire 526 -4,000,
  </code></pre>
  
  <p>My Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myApp = angular.module('myApp',[]);
  
  myApp.controller('MyCtrl', function($scope) {
   $scope.selectedBrands = [];
    
    $scope.selectBrand = function(selectedPhone) {
    console.log(selectedPhone);
     // If we deselect the brand
     if ($scope.selectedBrands.indexOf(selectedPhone.brandname) === -1) {
       // Deselect all phones of that brand
       angular.forEach($scope.phones, function(phone) {
         if (phone.brandname === selectedPhone.brandname) {
           phone.selected = false;
          }
        });
      }
    }
    
    $scope.checkSelectedPhones = function() {
     var modelNames = [];
     angular.forEach($scope.phones, function(phone) {
       if (phone.selected) {
         modelNames.push(phone.modelname);
        }
      });
   console.log(modelNames);
   
      console.log(modelNames.length ? modelNames.join(', ') : 'No phones selected!');
    }
  
   $scope.phones = [{
      id: "986745",
      brandname: "Nokia",
      modelname: "Lumia 735 TS"
    }, {
      id: "896785",
      brandname: "Nokia",
      modelname: "Nokia Asha 230"
    }, {
      id: "546785",
      brandname: "Nokia",
      modelname: "Lumia 510"
    }, {
      id: "144745",
      brandname: "Samsung",
      modelname: "Galaxy Trend 840"
    }, {
      id: "986980",
      brandname: "Samsung",
      modelname: "Galaxy A5"
    }, {
      id: "586980",
      brandname: "Samsung",
      modelname: "Galaxy Note 4 Duos"
    }, {
      id: "986980",
      brandname: "Samsung",
      modelname: "Galaxy A5"
    }, {
      id: "586980",
      brandname: "Samsung",
      modelname: "Galaxy Note Duos"
    }, {
      id: "232980",
      brandname: "Htc",
      modelname: "Htc One X9"
    }, {
      id: "456798",
      brandname: "Htc",
      modelname: "Desire 820"
    }, {
      id: "656798",
      brandname: "Htc",
      modelname: "Desire 810S"
   }];
  });
  
  myApp.filter('unique', function() {
    return function(collection, keyname) {
      var output = [], 
          keys = [];
  
      angular.forEach(collection, function(item) {
        var key = item[keyname];
        if(keys.indexOf(key) === -1) {
          keys.push(key);
          output.push(item);
        }
      });
  
      return output;
    };
  });
  //]]</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"&gt;&lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div ng-controller="MyCtrl"&gt;
    &lt;button ng-click="checkSelectedPhones()"&gt;
      Check selected phones
    &lt;/button&gt;
    
    &lt;div ng-repeat="phone in phones | unique:'brandname'"&gt;
      &lt;label&gt;
        &lt;input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedBrands[$index]" ng-change="selectBrand(phone)"&gt;  
        {{phone.brandname}}
      &lt;/label&gt;
    &lt;/div&gt;
    
    &lt;br&gt;
    
    &lt;div ng-repeat="brand in selectedBrands track by $index" ng-if="brand"&gt;
      {{brand}}
      &lt;div ng-repeat="phone in phones" ng-if="phone.brandname === brand"&gt;
        &lt;label&gt;
          &lt;input type="checkbox" ng-model="phone.selected"&gt;  
          {{phone.modelname}}
    &lt;input type="text" ng-model="price"&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My fiddle: <a href="https://jsfiddle.net/7pLsqhkg/3/" rel="nofollow">demo</a></p>
  
  <p>I need to make output data like that.</p>