Solution 1 :

If the goal is one-way binding, use ng-checked but don’t use interpolation ({{ }}):

<input type="checkbox" disabled  ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶{̶{̶c̶o̶m̶p̶1̶s̶t̶a̶t̶u̶s̶}̶}̶"̶
                                 ng-checked="comp1status" >

Use boolean values in the controller:

$scope.comp1status =;
if ($scope.comp1status === "0") {
    ̶$̶s̶c̶o̶p̶e̶.̶c̶o̶m̶p̶1̶s̶t̶a̶t̶u̶s̶ ̶=̶ ̶"̶c̶h̶e̶c̶k̶e̶d̶"̶;̶
    $scope.comp1status = true;
else {
    ̶$̶s̶c̶o̶p̶e̶.̶c̶o̶m̶p̶1̶s̶t̶a̶t̶u̶s̶ ̶=̶ ̶"̶u̶n̶c̶h̶e̶c̶k̶e̶d̶"̶;̶
    $scope.comp1status = false;


<script src="//"></script>
<body ng-app>
    <input type="checkbox" disabled ng-checked="check">Checkbox<br>

    <select ng-model="check">
       <option ng-value="" disabled>Select value</option>
       <option ng-value="false">unchecked</option>
       <option ng-value="true">checked</option>

Solution 2 :

Maybe, this code will help you

class AppController {
  constructor($scope, $q) {
    this.deferred = $q.defer();
    $scope.comp1status = true;
      .then(comp2status => {
        $scope.comp2status = comp2status;

  getComp2Status() {
    setTimeout(() => {
    }, 2000);
    return this.deferred.promise;

AppController.$inject = ['$scope', '$q'];

angular.module('app', [])
  .controller('appController', AppController);

angular.bootstrap(document.body, ['app']);
body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

.app {}
<script src=""></script>
<link rel="stylesheet" href="" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div ng-controller="appController" class="app">
  <div class="form-group form-check">
    <input ng-model="comp1status" type="checkbox" class="form-check-input" id="comp1status">
    <label class="form-check-label" for="comp1status">Comp1 status</label>
  <div class="form-group form-check">
    <input ng-model="comp2status" type="checkbox" class="form-check-input" id="comp2status">
    <label class="form-check-label" for="comp2status">Comp2 status async</label>

Solution 3 :

Use object to solve this issue and also use ‘==’ instead of ‘===’ if you are not sure about the data type that is returned.

<input type="checkbox" ng-model="someObject.someProperty"> Check Me!

// Controller

$scope.comp1status =;
if ($scope.comp1status == "0") {
  $scope.someObject.someProperty = false;
else {
  $scope.someObject.someProperty = true;

Problem :

i want to show on and off based on scope variable. but its always showing off , incase of on or checked the console window its showing checked, but in the toggle button its showing off


<input type="checkbox" disabled ng-checked="{{comp1status}}"
       data-toggle="toggle" data-onstyle="outline-success"
       data-offstyle="outline-danger"><br />

tried with

<input type="checkbox" disabled ng-model="comp2status" data-toggle="toggle"
       data-onstyle="outline-success" data-offstyle="outline-danger">

this also not worked


$scope.comp1status =;
if ($scope.comp1status === "0") {
    $scope.comp1status = "checked";
else {
    $scope.comp1status = "unchecked";


Comment posted by

Instead of setting to

Comment posted by krishna mohan

i have set true and false , that also not working. ng-checked=”{{comp2status}}”

Comment posted by Daniel W Strimpel

Try to remove the curly braces and just do

Comment posted by krishna mohan

$scope.comp3status = “true”;?.

Comment posted by

You want the

Comment posted by krishna mohan

but im looking for toogle button input type toggle

Comment posted by Daniel W Strimpel

“use ‘==’ instead of ‘==='” this is generally considered a bad practice

Comment posted by imThamizhselvan

If we are not sure about the data type that is returned by the API, then it is acceptable. Using === is good only if the data is managed by data

Comment posted by Daniel W Strimpel

It’s best to determine the API response format instead of guessing at types. When JS does the