JSFiddle - React, Tailwind, and code Playground

by pankaj agrawal

HTML

<div ng-controller="MyCtrl">
  
  <div ng-repeat="phone in phones">
    <label>
      <input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedBrands[$index]" ng-change="selectBrand(phone)">  
      {{phone.brandname}}
    </label>
  </div>
  
  <br>
  
  <div ng-repeat="brand in selectedBrands track by $index" ng-if="brand">
    {{brand}}
    
  </div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
	$scope.selectedBrands = [];
  
  $scope.selectBrand = function(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);
      }
    });
    
  }

	$scope.phones = [
    {brandname: "Nokia"}, {brandname: "Samsung"}, {brandname: "Htc"}
            ];
});

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;
  };
});