ng-show not working after setting checkbox value

Question

I have a checkbox which shows/hides a graph when clicked. When I change its clicked attribute in controller, button gets clicked but the graph does not become visible.

The html part I use is below;

<div class="panel panel-default">
   <div class="col-xs-6 col-md-4">
      Graph
      <input type="checkbox" ng-model="visibleGraph" id="graph_check">
   </div>
</div>
<div class="panel panel-default" ng-show="visibleGraph">
   <div class="panel-heading">Graph</div>
   <div class="panel-body">
      <canvas id="line" class="chart chart-line" chart-data="graph_data"
         chart-labels="graph_labels" chart-series="series" chart-options="options"
         chart-dataset-override="datasetOverride" chart-click="chartClicked">
      </canvas>
   </div>
</div>

and here how I set its value in controller;

document.getElementById("graph_check").checked=true;

Is there something I am missing?

@Hadi don't suggest such things, this is not angular way of doing it. Though it would work, just have to run digest cycle manually. — Pankaj Parkar, Jul 29 '17 at 12:34

Pankaj Parkar · Answer 1 · 2017-07-29T12:37:07.937

Manipulating scope/DOM value directly from jQuery would not intimate AngularJS digest cycle system to update bindings on page, in such cases you have to run digest cycle manually (though updating scope/DOM from controller is anti-pattern).

You could directly set visibleGraph value, in-spite of setting value in DOM.

$scope.visibleGraph = true

Also I'd highly recommend to read up on “Thinking in AngularJS” if I have a jQuery background?"

ng-show not working after setting checkbox value

1 Answers1