We Keep Coding

on-click event does not make the other field editable in one-click?

<!--Below is the html code-->
<div ng-init="InitializeFields()">
<input type="text" on-click="makeOtherReadOnly('1')"
readonly="show_or_not_first"/>
<input type="text" on-click="makeOtherReadOnly('2')" readonly="show_or_not_second"/>
</div>
// Now inside javascript
$scope.makeOtherReadOnly=function(number){
if(number==='1'){
show_or_not_second=true;
show_or_not_first=false;
show_or_not_second=true;
}else if(number==='2'){
show_or_not_first=true;
show_or_not_second=false;
}
};
$scope.Initializer=function(){
show_or_not_first=false;
show_or_not_second=false;
}
$scope.Initializer();
the problem that I am facing is as I click on the input field, it should turn the other field to readonly after pafe gets loaded and we have either field clicked, but it requires two click...
Every help is appreciated.

Try changing on-click to ng-click.

You need to correct few things ion your code :
change on-click to ng-click, So your function can be called from HTML.
Change readonly to ng-readonly, So you can utilize $scope property
In your ng-init, I guess you need to call Initializer() method to initialize default value.
Further just to make 2 input box readonly, you can chieve this by 1 flag. and no string comparison.
Simple Demo :
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.makeOtherReadOnly = function(boolValue) {
console.log(boolValue);
$scope.data.first = boolValue;
};
$scope.Initializer = function() {
$scope.data = {
first: false
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-init="Initializer()">
First: <input type="text" ng-click="makeOtherReadOnly(false)"
ng-readonly="data.first" />
Second: <input type="text" ng-click="makeOtherReadOnly(true)"
ng-readonly="!data.first" />
</div>
</div>

There are two scopes here
javascript and angular
sometimes inside ng-click, javqascript function don't work
so change on-click to ng-click.

AngularJS Checkbox retain check value when the page reloads

I have a search screen with a checkbox, and want to retain the checkbox selection when the user navigates away and comes back to the screen.
Using the session storage, i am able to retain the value in the model, but the checkbox checked does not display correct based on the model value.
When I search online, it looks like i cannot use ng-model and ng-checked together. But I don't want to use jquery either.
Is it possible to do this with just Angular? Thanks in Advance.
<div class="container" ng-controller="SearchController as vm" data-ng-init="vm.init()">
<form ng-submit="vm.Search()">
<input type="checkbox" id="chkActive" name="chkActive" value="Active" ng-model="vm.searchInput.active" ng-checked="vm.searchInput.active" /> <span>Show Active Records</span>
<button id="searchBtn" type="submit">
</form>
</div>
Angular Controller Code:
vm.searchInput = { active: true};
vm.init = function () {
if ($window.sessionStorage.getItem("Search_Active")) {
vm.searchInput.active = $window.sessionStorage.getItem('Search_Active'); }
}
vm.Search = function () {
$window.sessionStorage.setItem('Search_Active', vm.searchInput.active);
}

I haven't checked it, but I'm sure the first line should read:
vm.searchInput = { active: true};

If the model value is there, you want to bind to it, and you know it's good then why would you need both checked and model? Binding the value to the input is enough. As you can see below, using both is problematic.
angular.module('app', []);
angular.module('app').controller('c', c);
function c() {
var self = this;
self.checked = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app "app" ng-controller="c as ctrl">
<div>
<label>Checked</label>
<input type="checkbox" ng-model="ctrl.checked" />
<div>
<span>Checked: {{ctrl.checked}}</span>
</div>
</div>
<div>
<label>Checked Trouble</label>
<input type="checkbox" ng-model="ctrl.checked" ng-checked="!ctrl.checked" />
<div>
<span>Checked: {{ctrl.checked}}, !Checked: {{!ctrl.checked}}</span>
</div>
</div>
<div>
<label>Checked Double Trouble</label>
<input type="checkbox" ng-checked="!ctrl.checked" ng-model="ctrl.checked" />
<div>
<span>Checked: {{ctrl.checked}}, !Checked: {{!ctrl.checked}}</span>
</div>
</div>
</div>

How to bind single checkbox value with AngularJS Controller

I have checked question How to bind to list of checkbox values with AngularJS. But this question explains list of arrays and best ways to handle it in Angular controller.
<input type='checkbox' name="filter" checked>
How can we bind value to checkbox to have value as modal 0 when unchecked and 1 when checked? What should be in HTML and Controller?
$scope.filter = 0;

Try this:
$scope.filter = 0;//or 1
HTML:
<input type="checkbox" ng-model="filter" ng-true-value="1" ng-false-value="0">

Here is an modified example based on the AngularJS documentation
Controller
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.checkboxModel = 0; //Set checkbox to unchecked
}]);
HTML
<input type="checkbox" ng-model="checkboxModel" ng-true-value="1" ng-false-value="0">

Angular has provided ng-true-value & ng-false-value directives to fullfill your requirement. Through it you can associate true/false values with checkbox and same will be using by model as well.
You can try below code
<div ng-controller="ValidateCtrl">
Check Value: <input type="checkbox" ng-true-value="1" ng-false-value="0" ng-model="checkBoxModel"/>
</div>
Controller
---------
function ValidateCtrl($scope) {
$scope.checkBoxModel = '1';
};
So initially checkbox will be checked.

Angular checkboxes disapear on select

I have a list of checkboxes in my app:
<div class="col-md-6" ng-repeat="item in segment.items">
<div class="checkbox">
<label>
<input
type="checkbox"
ng-model="item"
ng-checked="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
{{item.name}} <code>/ {{item.slug}}</code>
</label>
</div>
</div>
The data, that exists on the $scope as segment.items, looks something like this:
[
{"id":1,"slug":"nl","name":"Dutch","enabled":true},
{"id":4,"slug":"en","name":"English","enabled":false},
{"id":2,"slug":"fr","name":"French","enabled":true},
{"id":3,"slug":"de","name":"German","enabled":false}
]
This renders fine on load, and the correct checboxes are checked. However, if I select a checkbox, the label disappears and the binding appears to be lost. If I deselect a checkbox, it seems to work fine, but if I select it again, it disappears as well. No errors show up in the console.
This is what it looks like on load:
And as soon as I click on "English" I get this
I'm new to Angular so I suspect I am doing something obvious wrong. Can anybody please point me in the right direction?

pointing your ng-model to ng-model="item" will cast your item into a boolean.
Also, you should not use ng-model with ng-checked : https://docs.angularjs.org/api/ng/directive/ngChecked
what you should do is the following :
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>

You need to bind the ng-model directly on your enabled boolean attribute:
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.segment = {
items: [
{"id":1,"slug":"nl","name":"Dutch","enabled":true},
{"id":4,"slug":"en","name":"English","enabled":false},
{"id":2,"slug":"fr","name":"French","enabled":true},
{"id":3,"slug":"de","name":"German","enabled":false}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
{{segment.items}}
<div class="col-md-6" ng-repeat="item in segment.items">
<div class="checkbox">
<label>
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
{{item.name}} <code>/ {{item.slug}}</code>
</label>
</div>
</div>
</div>

Change radio model on button click [angularjs]

What i want to achieve is trigger the change of the model "value" of the radio when i click on the button change input.
Why do i need to call twice click so that the model gets updated and the radio gets checked?
http://jsfiddle.net/7GfB9/
HTML
<div ng-app ng-controller="Ctrl">
<input type="radio" ng-model="value" ng-value="33">
<input type="radio" ng-model="value" ng-value="22">{{ value }}
<button onclick="changeInput()">Change input</button>
</div>
JS
function Ctrl($scope) {
}
function changeInput() {
$('input:eq(0)').click().click();
}

Likely because the value is updated before your onclick function is called. Why don't you update the value in your onclick function and only use one click?

Forget jQuery and try this :
<button ng-click="value = 33">Change input</button>
http://jsfiddle.net/7GfB9/3/

Solution i've come up with. I'm new to angularjs seems like im not used to it yet.
HTML
<div ng-app ng-controller="Ctrl">
<input type="radio" ng-model="value" ng-value="33">
<input type="radio" ng-model="value" ng-value="22">{{ value }}
<button ng-click="changeInput()">Change input</button>
</div>
js
function Ctrl($scope) {
$scope.changeInput = function () {
$scope.value=$('input:eq(0)').val();
}
}