html - AngularJS- how to hide elements using ng-hide? -

i have app has been written in angularjs, , trying add functionality hide headings of widgets displayed on 1 of web pages when user selects checkbox indicate should hidden.

at moment, have page displays number of widgets- on 'heading' of each widget, there 'settings' button. when user clicks settings button, dialog box opens on top of current page (i.e. user not navigate page- url not change @ all). dialog box contains form number of input fields- 1 of checkbox want use 'hide' headings of of widgets on webpage.

i have been following example at: https://docs.angularjs.org/api/ng/directive/nghide try , this, can't quite seem working...

i have added ng-hide attribute html element, in example:

<div data-ng-if="widget.name === 'tag-box'" ng-hide="hidewidgetheading"> <!-- class="ng-hide"-->     <div class="divider"></div>     ...      <div class="divider"></div>     <div class="row ui-checkbox-row">         <label class="col-sm-4 col-xs-6" data-i18n="hide widget heading:"></label>         <div class="col-sm-8 col-xs-6">             <label class="ui-checkbox">                 <input type="checkbox" name="nowidgetheading" id="nowidgetheading" ng-true-value= "'yes'" ng-false-value= "'no'" ng-change="hidewidgetheading()" ng-click="hidewidgetheading()" ng-checked="hidewidgetheading" ng-model="viewmodel.hidewidgetheading">                 <!-- ng-model="viewmodel.hidewidgetheading" -->                 <span></span>             </label>         </div>     </div> </div> 

i defined hidewidgetheading() function in ctrl.js file follows:

function hidewidgetheading(){     if($scope.widgetheadingcheckbox==false) {         $scope.$watch('nowidgetheading', function() {             $scope.hidewidgetheading = true;              console.log("value of hidewidgetheading: ", $scope.hidewidgetheading);         });         return true;      } else {         console.log("hidewidgetheading() else called (widget/ctrl.js line 440) ");         $scope.$watch('nowidgetheading', function() {             $scope.hidewidgetheading = false; //document.getelementbyid('nowidgetheading');         });         return false;      }      if($scope.hidewidgetheading) {         console.log("hidewidgetheading true- hide widget heading: ");      }     return $scope.hidewidgetheading; } 

and have added following css widgets.scss file:

.animate-show-hide.ng-hide {   opacity: 0; }  .animate-show-hide.ng-hide-add, .animate-show-hide.ng-hide-remove {   transition: linear 0.5s; }  .umw-tag-box {   opacity: 1; } 

when load page presently, when click settings button, dialog opens up. if check 'hide widget heading' checkbox, , click submit, debug have added displays following in console:

value of hidewidgetheading: true

which tells me code inside $scope.$watch(...){...} function running.

however, if click settings button, , either don't check 'hide widget heading' checkbox, or check , uncheck again, , click submit, same true value displayed in console debug, indicates code inside $scope.$watch(...){...} function running regardless of whether 'watched' element changes or not.

questions

1. how can ensure code inside $scope.$watch(...){...} runs when 'watched' element (i.e. checkbox) has value changed?

2. how 'call' css i've added hide html elements on particular html want hide? or how make css 'apply' html elements want hide?

edit

i changed html checkbox to:

<input type="checkbox" ng-model="checked" name="nowidgetheading" id="nowidgetheading"> 

as suggested, , when browse page, , open dialog, displays widget expect:

when click 'settings' button on widget, 'configure item' dialog opens on top of page:

but when select 'hide widget heading' checkbox, hides 'tag' label & input box dialog:

the element want hide displayed on page dialog box opened, not on dialog box itself... can't seem work out how can hide using control on dialog... suggestions?

so, should work, first example shown in docs, code be:

<div data-ng-if="widget.name === 'tag-box'" ng-hide="viewmodel.hidewidgetheading"> <!-- class="ng-hide"-->     <div class="divider"></div>     ...      <div class="divider"></div>     <div class="row ui-checkbox-row">         <label class="col-sm-4 col-xs-6" data-i18n="hide widget heading:"></label>         <div class="col-sm-8 col-xs-6">             <label class="ui-checkbox">                 <input type="checkbox" name="nowidgetheading" id="nowidgetheading" ng-true-value= "'yes'" ng-false-value= "'no'" ng-change="logwidgetheading()" ng-click="logwidgetheading()" ng-checked="viewmodel.hidewidgetheading" ng-model="viewmodel.hidewidgetheading">                 <!-- ng-model="viewmodel.hidewidgetheading" -->                 <span></span>             </label>         </div>     </div> </div> 

you can keep functions on events if wan log values, there no need hiding. ng-model directive update value , ng-hide should follow.

function logwidgetheading(){     console.log("value of hidewidgetheading: ", $scope.hidewidgetheading); } 

what saying function or var: in cases, used have values scope not updated, , solution introduce function called retreive value. thought trying because ng-hide="hidewidgetheading" shows same name function: function hidewidgetheading(){, that's why first said round brackets missing. version (without ng-model on purpose, show alternate way modify stuff events):

<div data-ng-if="widget.name === 'tag-box'" ng-hide="gethidewidgetheading()"> <!-- class="ng-hide"-->     <div class="divider"></div>     ...      <div class="divider"></div>     <div class="row ui-checkbox-row">         <label class="col-sm-4 col-xs-6" data-i18n="hide widget heading:"></label>         <div class="col-sm-8 col-xs-6">             <label class="ui-checkbox">                 <input type="checkbox" name="nowidgetheading" id="nowidgetheading" ng-true-value= "'yes'" ng-false-value= "'no'" ng-change="togglewidgetheading()" ng-checked="ishiddenwidgetheading">                 <!-- ng-model="viewmodel.hidewidgetheading" -->                 <span></span>             </label>         </div>     </div> </div> 

and js:

//initialisation default value: $scope.ishiddenwidgetheading = false;  //function toggles value: $scope.togglewidgetheading = function(){     $scope.ishiddenwidgetheading = !$scope.ishiddenwidgetheading; };  //function retreive value: $scope.gethidewidgetheading = function(){     return $scope.ishiddenwidgetheading; }; 

sorry bit quick in naming vars , such, should need here..