Template "custom Switch" not clickable

Apps & Services HABPanel
1

I have created a template using the following code:

    <div ng-if="itemValue('Bedroom2_Light2')=='OFF' || itemValue('Bedroom2_Light2')=='NULL'" ng-style="{opacity: 0.1}">
    	<span>
    		<widget-icon iconset="'smarthome-set'" icon="'bulb'" size="64" />
    	</span>
    </div>

    <div ng-if="itemValue('Bedroom2_Light2')=='ON'" ng-style="{opacity: 1.0}">
      <div ng-init='light1={"name": "Light2", "item": "Bedroom2_Light2", "hidelabel": false, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "64" }'>
      	<span>
    			<widget-switch ng-model="light1" />
      	</span>
      </div>
    </div>

whenever the selected item “Bedroom2_light2” is off, the icon appears grayed, and when I switch it on, it shows the icon as Active… this is fine
but when I tried to switch OFF the “Bedroom2_light2” with the custom widget I attached the code for, it is not clickable.

If I switch the if statement on the top from ON to OFF and the other one from OFF to ON, it works and I can switch the Light. but this is not what I want to achieve, I want to custom widget to be Active when the item is ON.
Any idea

2

Shouldn’t you have the widget-switch in both divs? The way I see it, that the switch is there only when the div which is active when the light is on is visible. The off-div doesn’t have a switch to press.

3

The point is to have the widget active only if item “Bedroom2_light2” is active.
Once I achive this, I will change the div switch to another feature for the same light, like changing the brightness of this light.
I want to control the brightness of the light only if the light itself is on.