We Keep Coding

AngularJS : Changing values in other div, is changing data in all divs

Page looks like this :
HTML
<li class="list-group-item" ng-repeat="eachData in lstRepositoryData">
<div class="ember-view">
<div class="github-connection overflow-hidden shadow-outer-1 br2">
<!-- code to created other stuff-- >
<div class="panel-heading">
<a for="collapse{{$index}} accordion-toggle" data-toggle="collapse" href="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">Show SFDC
connections</a>
<div id="collapse{{$index}}" class="collapse mt3 panel-collapse">
<div class="row no-gutters pa3">
<div class="col-12 col-sm-6 col-md-8">
<form>
<div class="form-group row">
<label for="inputorgNamel3" class="col-sm-2 col-form-label required">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputorgNamel3" placeholder="Name" ng-model="eachData.sfdcOrg.orgName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row">
<label for="inputenvironment3" class="col-sm-2 col-form-label required">Environment</label>
<div class="col-sm-10">
<div class="dropdown bootstrap-select">
<select class="form-control" id="inputenvironment3" ng-model="eachData.sfdcOrg.environment" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
<option value="0" selected>Production/Developer</option>
<option value="1">Sandbox</option>
<option value="2">Custom Org</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label for="salesforceLoginl3" class="col-sm-2 col-form-label required">Salesforce Login</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="salesforceLoginl3" placeholder="Salesforce userName"
ng-model="eachData.sfdcOrg.userName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row" ng-show="eachData.sfdcOrg.environment === '2'">
<label for="salesforceinstanceURLl3" class="col-sm-2 col-form-label required">Instance Url</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="salesforceinstanceURLl3" placeholder="Salesforce Instance Url"
ng-model="eachData.sfdcOrg.instanceURL" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row">
<label for="branchNamel3" class="col-sm-2 col-form-label required">Branch Name</label>
<div class="col-sm-10">
<input class="form-control" id="branchNamel3" placeholder="search branches..."
ng-model="eachData.sfdcOrg.instanceURL">
</div>
</div>
<div class="form-group row">
<div class="form-group">
<!-- Buttons Code -->
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
JS Code :
var app = angular.module('forceCIApp', ["angularjs-dropdown-multiselect"]);
app.controller('orderFromController', function ($scope, $http, $attrs) {
$scope.reposInDB = [];
$scope.lstRepositoryData = [];
const sfdcOrg = {
orgName: '',
environment: '0',
userName: '',
instanceURL: '',
authorize: 'Authorize',
save: 'Save',
testConnection: 'Test Connection',
delete: 'Delete',
oauthSuccess: 'false',
oauthFailed: 'false',
oauthSaved: 'false',
disabledForm: 'false',
multiBranchData: [],
multiExtraSettings: {enableSearch: true, showCheckAll: false, showUncheckAll: false},
multiSelectedBranches: []
};
$http.get("/fetchUserName").then(function (response) {
if (response.data !== undefined && response.data !== null) {
$scope.userName = response.data.login;
localStorage.setItem('githubOwner', response.data.login);
$http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
if (response.data.length > 0) {
for (let i = 0; i < response.data.length; i++) {
let lstBranches = [];
$.each(response.data[i].repository.mapBranches, function (key, value) {
console.log(key);
lstBranches.push(key);
});
sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
response.data[i].repository.sfdcOrg = sfdcOrg;
$scope.lstRepositoryData.push(response.data[i].repository);
$scope.reposInDB.push(response.data[i].repository.repositoryFullName);
}
$('#repoConnectedDialog').removeClass('hidden');
}
}, function (error) {
});
const avatarSpanTag = '<span class="absolute flex items-center justify-center w2 h2 z-2 ' +
'nudge-right--4 pe-none" style="top: -15px">\n' +
' <img src=' + response.data.avatar_url + '>\n' +
' </span>';
$(avatarSpanTag).insertAfter('#idSelectTab');
}
}, function (error) {
});
When I start editing input fields other divs input field also gets changed. But the data is different in both divs eachData.
Also disabling the form with eachData.sfdcOrg.disabledForm works fine.
But modifying the input elements modifies all the the input fields.
How do I avoid this?

The data was constructed by reference assignment instead of creating a clone object for each sfdcOrg property of each item in the lstRepositoryData array.
$http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
if (response.data.length > 0) {
for (let i = 0; i < response.data.length; i++) {
let lstBranches = [];
$.each(response.data[i].repository.mapBranches, function (key, value) {
console.log(key);
lstBranches.push(key);
});
sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶[̶i̶]̶.̶r̶e̶p̶o̶s̶i̶t̶o̶r̶y̶.̶s̶f̶d̶c̶O̶r̶g̶ ̶=̶ ̶s̶f̶d̶c̶O̶r̶g̶;̶
response.data[i].repository.sfdcOrg = angular.copy(sfdcOrg);
$scope.lstRepositoryData.push(response.data[i].repository);
$scope.reposInDB.push(response.data[i].repository.repositoryFullName);
}
$('#repoConnectedDialog').removeClass('hidden');
}
});
Use angular.copy to clone a new object.

Hidden input not submitted after updating value in on submit event

Using Laravel framework.
I don't get it. I have a hidden input with id = prime near the top.
<form name="paymentForm" action="/parking_302/upload_payment" method="POST" role="form" class="form-horizontal">
{{ csrf_field() }}
<input type="hidden" id="parking_lot_id" name="parking_lot_id" value="{{ $parking_lot_id }}">
<input type="hidden" id="booking_id" name="booking_id" value="{{ $booking_id }}">
<input type="hidden" id="Price" name="Price" value="{{ $Price }}">
<input type="hidden" id="prime" name="prime"> {{-- To be obtained --}}
<legend>電子發票 & TapPay 付款</legend>
<div class="form-group">
<label for="CustomerEmail" class="col-lg-3 col-md-3 col-xs-4">電子信箱</label>
<div class="col-lg-9 col-md-9 col-xs-8">
<input type="email" class="form-control" id="CustomerEmail" name="CustomerEmail" value="{{ old('CustomerEmail') }}">
</div>
</div>
<div class="form-group">
<label for="CustomerPhone" class="col-md-3 col-xs-4">手機號碼</label>
<div class="col-md-9 col-xs-8">
<input type="number" class="form-control" id="CustomerPhone" name="CustomerPhone" value="{{ old('CustomerPhone') }}">
</div>
</div>
<hr>
<div class="form-group">
<div class="col-md-offset-3 col-xs-offset-4 col-md-9 col-xs-8">
<select class="form-control" id="giveTongBian" name="giveTongBian">
<option value="no" #if(old('giveTongBian') === "no") selected #endif>不需統編</option>
<option value="yes" #if(old('giveTongBian') === "yes") selected #endif>輸入統編</option>
</select>
</div>
</div>
<div class="form-group" id="customerIdentGroup">
<label for="CustomerIdentifier" class="col-md-3 col-xs-4">統一編號</label>
<div class="col-md-9 col-xs-8">
<input type="text" class="form-control" id="CustomerIdentifier" name="CustomerIdentifier" value="{{ old('CustomerIdentifier') }}">
</div>
</div>
<div class="form-group" id="customerNameGroup">
<label for="CustomerName" class="col-md-3 col-xs-4">買受人</label>
<div class="col-md-9 col-xs-8">
<input type="text" class="form-control" id="CustomerName" name="CustomerName" value="{{ old('CustomerName') }}">
</div>
</div>
<div class="form-group" id="customerAddrGroup">
<label for="CustomerAddr" class="col-md-3 col-xs-4">地址</label>
<div class="col-md-9 col-xs-8">
<input type="text" class="form-control" id="CustomerAddr" name="CustomerAddr" value="{{ old('CustomerAddr') }}">
</div>
</div>
<div class="tappay-form col-xs-offset-1 col-xs-10">
<h4 style="color: darkkhaki;">信用卡</h4>
<div class="form-group card-number-group">
<label for="card-number" class="control-label"><span id="cardtype"></span>卡號</label>
<div class="form-control card-number"></div>
</div>
<div class="form-group expiration-date-group">
<label for="expiration-date" class="control-label">卡片到期日</label>
<div class="form-control expiration-date" id="tappay-expiration-date"></div>
</div>
<div class="form-group cvc-group">
<label for="cvc" class="control-label">卡片後三碼</label>
<div class="form-control cvc"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Pay</button>
</div>
</div>
</form>
I then have a on submit event which does a few things. At the bottom is me updating the hidden input with id = prime.
$('form').on('submit', function (event) {
//Code for first part of form begin
var boolFlag = true; //Default is submit
var errorMsg = ""; //Initial message
//Begin validation
var numOfNonEmptyFields = 0;
if(document.forms["paymentForm"]["CustomerEmail"].value != "") {
numOfNonEmptyFields++;
}
if(document.forms["paymentForm"]["CustomerPhone"].value != "") {
numOfNonEmptyFields++;
}
if(numOfNonEmptyFields == 0) {
errorMsg += "請輸入至少一個電子信箱或手機號碼.\n";
boolFlag = false;
}
//End validation
//Final steps: overall error message + success or fail case
if(boolFlag == false) {
alert("錯誤:\n" + errorMsg);
return false;
}
//Code for first part of form end
// fix keyboard issue in iOS device
forceBlurIos()
const tappayStatus = TPDirect.card.getTappayFieldsStatus()
console.log(tappayStatus)
// Check TPDirect.card.getTappayFieldsStatus().canGetPrime before TPDirect.card.getPrime
if (tappayStatus.canGetPrime === false) {
bootbox.alert({
title: "錯誤訊息",
message: "取得不了Prime.",
buttons: {
ok: {
label: "OK",
className: "btn btn-primary"
}
}
});
return false
}
// Get prime
TPDirect.card.getPrime(function (result) {
if (result.status !== 0) {
bootbox.alert({
title: "錯誤訊息",
message: result.msg,
buttons: {
ok: {
label: "OK",
className: "btn btn-primary"
}
}
});
return false
}
$("#prime").val(result.card.prime);
})
})
I've tested the hidden input with alert($("#prime").val()) directly after and it seems updated, however after submission, my Controller receives the value as null while other hidden input values are correct. So I suspect it's something got to do with the on submit event.

Added id attribute to the form element:
<form id="paymentForm" name="paymentForm" action="/parking_302/upload_payment" method="POST" role="form" class="form-horizontal">
Removed type from the button and added id:
<button id="submit-btn" class="btn btn-default">Pay</button>
Introduced a new click listener:
$(document).on("click","#submit-btn", function(event){
event.preventDefault();
validateAndSendForm();
});
Introduced a new function for the final form submit:
function submitForm(){
//do other stuff here with the finalized form and data
//.....
$( "#paymentForm" ).submit();
}
And put all of your old things into a new function as well:
function validateForm(){
//Code for first part of form begin
var boolFlag = true; //Default is submit
var errorMsg = ""; //Initial message
...
...
...
}
// Get prime
TPDirect.card.getPrime(function (result) {
if (result.status !== 0) {
bootbox.alert({
title: "錯誤訊息",
message: result.msg,
buttons: {
ok: {
label: "OK",
className: "btn btn-primary"
}
}
});
return false;
}
$("#prime").val(result.card.prime);
//use when you are ready to submit
submitForm();
})
}
So, basically you will have a "submitForm" function that you can use whenever you are ready to submit the form.

Seems like TPDirect.card.getPrime is something that gets data asynchronously so the $('form').on('submit' function won't wait for it to finish.

How to enable disable a select drop down list using radio buttons with angularjs?

I have been searching all over for the internet looking on how to enable or disable this drop down list using radio buttons specifically when the radio button value is equal to prof the drop down list should be disabled, but with no help. I did come up with an example but didn't work. Any help would be appreciated.
registration.html
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
//This is the drop down that I need to diable
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
This is the code I implemented to work above scenario. But didn't work :(
regController.js
$scope.$watch('QualificationDetails.qualicication_type', function (QualiType) {
if (angular.isUndefined($scope.QualificationDetails)) {
return;
}
if (QualiType === 'prof') {
$scope.QualificationDetails.qualification_type = $scope.QualiType;
}
else {
if ($scope.QualificationDetails.qualification_type !== null) {
$scope.QualiType = $scope.QualificationDetails.qualification_type;
$scope.QualificationDetails.qualification_type = null;
}
}
});
the above scenario is that when it comes to qualifications if qualification type is equal to professional (prof) drop down list is disabled and when it is educational the drop down list should be enabled. Any idea on how to achieve this.
This is the Quality level json. I get it through the qualitylevel.service.
(function initController() {
deptService.getdepts(function (res) {
$scope.depts = JSON.parse(res.data);
});
qualiService.getquali(function (res) {
console.log("inside ");
$scope.qualiLevel = JSON.parse(res.data);
});
console.log("inside service");
})();

It seems to me, that your code works fine without watcher you have added. I hope I understood what you want correctly. Try this snippet:
angular
.module('app', [])
.controller('Ctrl', function($scope) {
$scope.qualiLevel = [
{quali_level: 'A', qualification_id: 1},
{quali_level: 'B', qualification_id: 2}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
</div>
</div>

As the control is radiobutton, your QualificationDetails.qualification_type value will be set to 1 or 0 and not to the label value. You have to have different variables for two radio buttons. Based on their value you have to set QualificationDetails.qualification_type = 'prof' or something
You can also try $parent.QualificationDetails.qualification_type instead as answered in How can I get the value of the checked radio button when submitting a form using angularjs?

Thanks everyone for helping me out. Just felt wanted to show I implemented it correctly and other programmers to increase their knowledge. Using $watch to temporaly hide the drop down list details).
the registrationController.js
$scope.$watch('QualificationDetails.qualification_type', function (Val) {
if (angular.isUndefined($scope.QualificationDetails))
return;
if (Val !== 'prof') {
$scope.QualificationDetails.qualification = $scope.tempValue;
}
else {
if ($scope.QualificationDetails.qualification !== null) {
$scope.tempValue = $scope.QualificationDetails.qualification;
$scope.QualificationDetails.qualification = null;
}
}
});
Implemented through this example.

Generate dynamic form input fields and collect field data in an array in angularJS

I need to generate form input fields dynamically by clicking 'add sale' button on the form. which is accomplished
Also on change selected drop down, it get the price from the database and use the quantity to calculate the amount of that product.
if I click on 'add sale' button for another form generate the changes affect the previous one.
how to calculate the amount for each form independently and collect the data in it using angularJS?
this is controller
appcat.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location)
{
//var quan = $scope.quantity;
$http.get('/api/pproduct').success(function (data)
{
$scope.pcategoryA = data;
});
// this controll the addition and removal
$scope.choices = [{ id: 'choice1' }];
//any time changes occurr it calculate the Amount
$scope.changedValue = function (item,quan)
{
if (item != null && quan !=null)
{
$http.get('/api/product/'+ item).success(function (data) // this is the price for that product from the Database
{
//this sets amount field
$scope.amount = parseFloat(data.price * quan);
});
}
}
// this generate a form
$scope.addNewChoice = function ()
{
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({ 'id': 'choice' + newItemNo });
};
// this remove the form
$scope.removeChoice = function () {
var lastItem = $scope.choices.length - 1;
if ($scope.choices.length > 1) {
$scope.choices.splice(lastItem);
}
};
}]);
this is the html
<form class="form-inline" role="form" padding-left:10em">
<strong class="error">{{ error }}</strong>
<div class="form-group">
<label for="name">
Invoice No. :
</label>
<input type="text" class="form-control" id="name" ng-model="name" />
</div>
<br /><hr />
<div ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<div class="form-group">
<label for="name">
Quantity :
</label>
<input type="text" class="form-control" id="quantity" ng-model="quantity" />
</div>
<div class="form-group">
<div class="form-group">
<label class="control-label"> Product : </label>
<select class="form-control" id="selected_id" ng-model="selected_id" ng-options="c.Value as c.Text for c in pcategoryA"
ng-change="changedValue(selected_id,quantity)">
<option value="">-- Select Category --</option>
</select>
</div>
</div>
<div class="form-group">
<label for="name">
Amount :
</label>
<input type="text" class="form-control" id="amount" ng-model="amount" ng-readonly="true" />
</div>
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
<br />
<hr />
</fieldset>
<button type="submit" class="col-sm-offset-10 addfields" ng-click="addNewChoice()">
Add Sale
</button>
</div>
</form>
thanks in advanced!!

You have to put 'amount' in choices array.
$scope.choices = [{ id: 'choice1', amount: 0}];
Then in controller:
$scope.changedValue = function (choise,item,quan)
choise.amount = parseFloat(data.price * quan);
And in tempalte:
ng-change="changedValue(choise,selected_id,quantity)">
<input type="text" class="form-control" id="amount" ng-model="choise.amount" ng-readonly="true" />

How can i check radio button by default?

On page load i want to show below radio button selected by default i used html attribute but its not working. So on page load I want to show all process radio button checked by default. Is there any other way to achieve this task?
radio.html
<div class="panel panel-default">
<div class="panel-heading">View/Search Inventory</div>
<div class="panel-body">
<div class="row">
<div class="col-md-2">
<select kendo-drop-down-list k-data-text-field="'name'"
k-data-value-field="'value'" k-data-source="filterOptions"
k-ng-model="kfilter" ng-model="filter" ng-change="onChange()"></select>
</div>
<div ng-show="filter=='PROCESS'" ng-init="search.showCriteria='allProcess';onChange()">
<div class="col-md-7">
<label class="radio-inline" for="allProcess"> <input
type="radio" name="optionsRadios1" ng-value="'allProcess'"
id="allProcess" ng-model="search.showCriteria"
ng-change="selectSearchType()"> Show All Processes
</label> <label class="radio-inline" for="ratedProcess"> <input
type="radio" name="optionsRadios1" ng-value="'ratedProcess'"
id="ratedProcess" ng-model="search.showCriteria"
ng-change="selectSearchType()"> Show Rated Processes
</label> <label class="radio-inline" for="unratedProcess"> <input
type="radio" name="optionsRadios1" ng-value="'unratedProcess'"
id="unratedProcess" ng-model="search.showCriteria"
ng-change="selectSearchType()"> Show Unrated Processes
</label>
</div>
</div>
<div ng-show="filter=='RISK'">
<div class="col-md-7">
<label class="radio-inline" for="allRisk"> <input
type="radio" name="optionsRadios1" ng-value="'allRisk'"
id="allRisk" ng-model="search.showCriteria" ng-checked="true"
ng-change="selectSearchType()"> Show All Risks
</label> <label class="radio-inline"> <input type="radio"
name="optionsRadios1" ng-value="'unalignedRisk'"
ng-model="search.showCriteria" ng-change="selectSearchType()">
Show Unaligned Risks
</label>
</div>
</div>
<div ng-show="filter=='CONTROL'">
<div class="col-md-7">
<label class="radio-inline" for="allControl"> <input
type="radio" name="optionsRadios1" ng-value="'allControl'"
id="allControl" ng-model="search.showCriteria" ng-checked="true"
ng-change="selectSearchType()"> Show All Controls
</label> <label class="radio-inline" for="unalignedControl"> <input
type="radio" name="optionsRadios1" ng-value="'unalignedControl'"
id="unalignedControl" ng-model="search.showCriteria"
ng-change="selectSearchType()"> Show Unaligned Controls
</label>
</div>
</div>
<div class="col-md-2">
<button class="btn btn-default" type="button" ng-click="search(0)">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</div>
<div class="row">
<!--<label for="filterBy" class="col-md-1">Filter by: </label>
<div class="col-md-3">
<select kendo-drop-down-list k-data-text-field="'name'" k-option-label="'Select'"
k-data-value-field="'value'" k-data-source="filterByOptions"
k-ng-model="kfilterBy" ng-model="filterBy" style="width: 100%"></select>
</div>
<div class="col-md-3">
<select kendo-drop-down-list k-data-text-field="'name'"
k-data-value-field="'value'" k-data-source="filterByValues" k-option-label="'Select'"
k-ng-model="kfilterByValue" ng-model="filterByValue" style="width: 100%"></select>
</div> -->
<div class="col-md-3">
<a href="" ng-show="!showAdvance" ng-click="advanceFilter()">Advanced
Search</a> <a href="" ng-show="showAdvance" ng-click="advanceFilter()">Basic
Search</a>
<!-- <button ng-show="!showAdvance" class="btn btn-default" type="button" ng-click="search()">Go</button> -->
</div>
</div>
<form role="form" name="formTimeLine" kendo-validator="validator"
k-options="myValidatorOptions">
<div ng-show="showAdvance">
<div class="clone" ng-repeat="input in inputs">
<br />
<div class="row">
<div class="col-md-1">
<a ng-if="inputs.length < searchOptions.length"
class="add col-md-1" name="addnumadd" ng-click="add($index)"> </a>
<a ng-if="inputs.length >1" class="delete col-md-1"
name="deletenumadd" ng-click="remove($index)"> </a>
</div>
<div class="col-md-3">
<select kendo-drop-down-list k-data-text-field="'name'"
k-option-label="'Select'" k-data-value-field="'value'"
k-data-source="searchOptions" name="searchBy-{{$index}}"
ng-model="input.searchBy"
data-required-msg="Please select the value"
ng-change="clearPreviousValue({{$index}})" data-duplicate=""
style="width: 100%" required></select>
</div>
<div class="col-md-3">
<input type="text" class="form-control"
ng-model="input.searchValue" placeholder="Enter search item"
ng-maxlength="256" name={{$index}}>
</div>
<div class="col-md-4">
<input type="radio" name={{$index}} value="exactMatch"
ng-model="input.exactMatch" data-requiredCheckbox=""> Exact
Match <input type="radio" name={{$index}} value="contains"
ng-model="input.exactMatch" data-requiredCheckbox=""> Contains
<span class="k-invalid-msg" data-for={{$index}}></span>
</div>
</div>
</div>
</div>
</form>
</div>
<div id="outergrid" class="row">
<ng-include src="gridInclude"></ng-include>
</div>
</div>
radio.js
$scope.processSearchOptions = processSearchOptions;
$scope.riskSearchOptions = riskSearchOptions;
$scope.controlSearchOptions = controlSearchOptions;
$scope.filterByOptions = filterByOptions;
$scope.filterByValues = filterByValues;
$scope.searchOptions = processSearchOptions;
$scope.onChange = function () {
var value = $scope.filter;
$scope.postArgs.page = 1;
if (value === 'PROCESS') {
$scope.search.showCriteria = 'allProcess';
$scope.searchOptions = processSearchOptions;
$scope.gridInclude = 'views/viewAll/processGrid.html';
}
if (value === 'RISK') {
$scope.search.showCriteria = 'allRisk';
$scope.searchOptions = riskSearchOptions;
$scope.gridInclude = 'views/viewAll/riskGrid.html';
}
if (value === 'CONTROL') {
$scope.search.showCriteria = 'allControl';
$scope.searchOptions = controlSearchOptions;
$scope.gridInclude = 'views/viewAll/controlGrid.html';
}
$scope.showAdvance = false;
$scope.clearAdvFilter();
$scope.postArgs = {
page: 1
};
};
//initialize process grid
initializeGrid('process');
$scope.processGridOptions = getProcessGridOptions($scope.postArgs, gridColumns.processGridColumns);
$scope.processInnerGridOptions = viewSearchInvService.getInnerProcessGrid;
//initialize risk grid
initializeGrid('risk');
$scope.riskGridOptions = getProcessGridOptions($scope.postArgs, gridColumns.riskGridColumns);
$scope.riskInnerGridOptions = viewSearchInvService.getInnerRiskGrid;
//initialize control grid
initializeGrid('control');
$scope.controlGridOptions = getProcessGridOptions($scope.postArgs, gridColumns.controlGridColumns);
$scope.controlInnerGridOptions = viewSearchInvService.getInnerControlGrid;
$scope.ProcessEditHandler = function (id) {
ViewEditPrcsService.saveProcessId(id);
};
$scope.RiskEditHandler = function (id) {
ViewEditRiskService.saveRiskId(id);
};
$scope.advanceFilter = function () {
if ($scope.showAdvance) {
$scope.clearAdvFilter();
$scope.showAdvance = false;
} else {
$scope.showAdvance = true;
}
};
$scope.clearAdvFilter = function () {
$scope.inputs = [];
$scope.inputs.push(getNewObject());
};
$scope.search = function () {
if ($scope.validator.validate() || !$scope.showAdvance) {
searchCriteria(1);
searchFlag = true;
if ($scope.filter === 'PROCESS') {
$scope.search.process.dataSource.read();
}
if ($scope.filter === 'RISK') {
$scope.search.risk.dataSource.read();
}
if ($scope.filter === 'CONTROL') {
$scope.search.control.dataSource.read();
}
}
};
$scope.selectSearchType = function () {
$scope.clearAdvFilter();
$scope.showAdvance = false;
$scope.search();
};
$scope.add = function () {
$scope.inputs.push(getNewObject());
};
$scope.remove = function (index) {
$scope.inputs.splice(index, 1);
};
$scope.myValidatorOptions = {
rules: {
duplicate: function (input) {
return checkDuplicates(input.val(), input[0].name);
},
requiredCheckbox: function (input) {
return !(input[0].type === 'radio' && !$scope.inputs[input[0].name].exactMatch && !$scope.inputs[input[0].name].contains);
}
},
messages: {
duplicate: 'Option already selected. please select another option',
requiredCheckbox: 'Operator is required'
}
};
$scope.clearPreviousValue = function (index) {
$scope.inputs[index].searchValue = '';
};
});

Without knowing more about the specifics of when you want this checked, apply the following using ngChecked. In this case, checked if true, but this can be any expression
ng-checked="true"
JSFiddle Link
In response to your updated code, you could leverage ngInit on your parent <div> for defaulting one radio button in a group. Note for isolating the direct issue I have slimmed down most of this markup
<div ng-init="search.showCriteria='allProcess'">
Updated JSFiddle Link

You need to make sure your model is set to the value of the radio box.
$scope.search.showCriteria = 'allProcess'
As a side node, you don't need to be using ng-value here. You could use just use value="allProcess" because ng-value is only needed for Angular expressions, not plain strings.