Display selected checkbox value in angularjs - angularjs

Question

I have a form which have textbox,selectbox and checkbox. I want to display the values in the form in a grid table in the same page when the save button is clicked. I was able to display the textbox and selectbox value .But I dont know how to display the selected checkbox value.
HTML code:
<div ng-controller="ProductCtrl">
<form class=rform align="center">
Product Name: <input type="text" name="name" ng-model="newProduct.name" ><br>
Product Category: <select name="catg" ng-model="newProduct.catg" ng-options="x for x in catg" ></select><br>
Tags :<input type="checkbox" name="Electronics" ng-model="newProduct.Electronics" value="Electronics" >Electronics
<input type="checkbox" name="Appliances" ng-model="newProduct.Appliances" value="Appliances">Appliances
<input type="checkbox" name="Others" ng-model="newProduct.Others" value="Books">Others
<input type="hidden" ng-model="newProduct.id" />
<div class="btn"> <button type="submit" ng-click="saveRecord()">Save</button></div>
</form>
<table border="2px" align="center" >
<tr>
<th>Product name</th>
<th>Category</th>
<th>Tag</th>
<th>id</th>
<th>Action</th>
</tr>
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.catg }}</td>
<td>{{ product.tag }}</td>
<td>{{product.id}}</td>
<td> edit |
delete</td>
</tr>
</table>
</div>
controller :
app.controller('ProductCtrl',function($scope,$http){
$scope.catg = ["mobile","TV","Air Conditioner","Kitchen appliances","Footwear","SportsWear","clothes","watches"];
var empid =0;
var id = 0;
$scope.products= [
{ id:'' , 'name': '', 'catg': '', 'tag': '' }
];
$scope.saveRecord = function () {
if ($scope.newProduct.id == null) {
$scope.newProduct.id = empid++;
$scope.products.push($scope.newProduct);
} else {
for (i in $scope.products) {
if ($scope.products[i].id == $scope.newProduct.id) {
$scope.products[i] = $scope.newProduct;
}
}
}
$scope.newProduct = {};
}
$scope.delete = function (id) {
for (i in $scope.products) {
if ($scope.products[i].id == id) {
$scope.products.splice(i, 1);
$scope.newProduct = {};
}
}
}
$scope.edit = function (id) {
for (i in $scope.products) {
if ($scope.products[i].id == id) {
$scope.newProduct = angular.copy($scope.products[i]);
}
}
}
}
);

Answer 1

you can change checkbox's checked/unchecked value from true/false to custom string by ng-true-value(checked) and ng-false-value(unchecked).
and if you want the same feature for radiobutton(guessed from your comment), you can bind custom string to each radio button by ng-value.
refer the below example.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="value='YES';value2='option1';">
<label>
<input type="checkbox" ng-model="value" ng-true-value="'YES'" ng-false-value="'NO'">checkbox</label><br> {{value}}
<br>
<label><input type="radio" name="option" ng-model="value2" ng-value="'option1'">{{option1}}</label>
<label><input type="radio" name="option" ng-model="value2" ng-value="'option2'">{{option2}}</label>
<label><input type="radio" name="option" ng-model="value2" ng-value="'option3'">{{option3}}</label>
<br>
{{value2}}
</div>