AngularJs checkbox issue single variable

Question

I'm new to angularjs v1. I want to know why I cannot assign a single variable scope into the md-checkbox. like

<md-checkbox ng-click="checkAllBox();" ng-model="chkValue" aria-label="Checkbox" style="float:left;margin-left:-4px;" class="md-primary"></md-checkbox>

;controller

$scope.chkValue = false;

which doesn't work (the $scope.chkValue didn't associate with the UI checkbox correctly). But the below is ok. May I know why?

<md-checkbox ng-click="checkAllBox();" ng-model="data.cb1" aria-label="Checkbox" style="float:left;margin-left:-4px;" class="md-primary"></md-checkbox>

;controller

$scope.data.cb1 = false;

always use a dot! https://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs-models-you-are-doing-it-wrong :-) — ngstschr, Jun 06 '17 at 07:59
See this [also](https://stackoverflow.com/a/43997604/3455035).. :) — anoop, Jun 06 '17 at 08:01

Burak Akyıldız · Answer 1 · 2017-06-06T08:21:55.373

Because you are changing a variable from child scope the parent scope variable never changed.. Scope's has inheritance. You can get information from docs

Edit

To be more spesific. Controllers, some directives('ng-if', 'ng-include', vs.), isolate scopes creates its own scope.

If you want to referance a variable you need to use it with variables owner.

There is a live answer below. You can see controller has created its own scope and the parent scope cant detect changes because it has a different owner(this) now.

var app = angular.module("app",[]);
app.controller("ctrl", function($scope){
  $scope.checkData = false;
})

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body  ng-app="app"  >
    parent1:<input ng-model="checkData" type="checkbox"/>
    
      <div class="child">
        <div class="child">
          <div class="innerChild">
            inner1:<input ng-model="checkData" type="checkbox"/>
          </div>
            <div class="innerChild">
              inner2:<input ng-model="checkData" type="checkbox"/>
          </div>
        </div>
      </div>
    Controller Scope -><br>
parent2:<input ng-model="checkData" type="checkbox"/>
    <div ng-controller="ctrl" >
      <div class="child">
        <div class="child">
          <div class="innerChild">
            inner1:<input ng-model="checkData" type="checkbox"/>
          </div>
            <div class="innerChild">
              inner2:<input ng-model="checkData" type="checkbox"/>
          </div>
        </div>
      </div>
      <div class="child">
        <div class="innerChild">
          inner3:<input ng-model="checkData" type="checkbox"/>
        </div>
      </div>
    </div>
  </body>
</html>

but why it works when i add change $scope.a to $scope.something.a ? — SKLTFZ, Jun 23 '17 at 14:31
Because if you have referance to `$scope.something.a` then you can change something and the changes will be reflected but `$scope.a` is directly variable of `$scope` and if you change the `a`, ` $scope` must be in `transclude` tree. — Burak Akyıldız, Jun 24 '17 at 07:49

AngularJs checkbox issue single variable

1 Answers1