lightbulb

HTML

<body ng-app="myApp">
    <div ng-controller="MyCtrl">
      

        
        <div ng-repeat="image in images"> 
            <a ng-click="toggleImage(image)">
                <img  ng-src="{{image.imgUrl}}" />                                 
            </a>

        </div>
    </div>
</body>

JavaScript

var myApp = angular.module('myApp', []);


function MyCtrl($scope) {
    //$scope.checkboxState = "off";
    //$scope.resetUrl = 'http://www.w3schools.com/js/pic_bulboff.gif';
    $scope.state = "on";
    $scope.onUrl = 'http://www.w3schools.com/js/pic_bulbon.gif';
    $scope.offUrl = 'http://www.w3schools.com/js/pic_bulboff.gif';
    $scope.images = [
        {imgUrl: 'http://www.w3schools.com/js/pic_bulboff.gif'}
    ];

    $scope.toggleImage = function (image) {
        if (image.imgUrl === $scope.offUrl) {
            
            image.imgUrl = $scope.onUrl;
        } else {
          
            image.imgUrl = $scope.offUrl; 

        }
    };
}