LightBulb Checkbox

There are two states: On & Off. There are two inputs that affect its state: clicking on the img and toggling the checkbox.

HTML

<body ng-app>
    <div ng-controller="MyCtrl">
        lightbulb is {{ getToggledText() }}
        <input type="checkbox" ng-model="isOn" />
            
        <a ng-click="toggleOnOff()">
            <img ng-src="{{ getToggledUrl() }}" />
        </a>
    </div>
</body>

JavaScript

function MyCtrl($scope) {
    $scope.onUrl = "http://www.w3schools.com/js/pic_bulbon.gif";
    $scope.offUrl = "http://www.w3schools.com/js/pic_bulboff.gif";
    $scope.isOn = false;
    //toggle bool
    $scope.toggleOnOff = function () {
                return $scope.isOn = !$scope.isOn;
            };
    //toggle text
    $scope.getToggledText = function() { return $scope.isOn ? "on" : "off" };
    //toggle image
    $scope.getToggledUrl = function() { 
        return $scope.isOn ? $scope.onUrl : $scope.offUrl; 
    };
}