title: Angular: Please turn on my light so I can see
body: <p>I want to toggle my 2 on &amp; off images when I click on my lightbulb. Sometimes it seems to work and other times it does not. I cant get the ng-click to work at all unless I use ng-repeat and at least two images. How do I best accomplish toggling the images for 1 lightbulb? Is there any way to synchronize the checkbox so that when it is checked the light goes on and when it is off the light goes off? (I am new to javascript)Here's the fiddle:
  <a href="http://jsfiddle.net/gogirl/7857c/" rel="nofollow">Fiddle</a></p>
  
  <pre><code>&lt;body ng-app="myApp"&gt;
  &lt;div ng-controller="MyCtrl"&gt;
    lightbulb is {{state}}     &lt;input type="checkbox" ng-model=
    "state" ng-true-value="on" ng-false-value="off"&gt; 
  
      &lt;div ng-repeat="image in images"&gt; 
          &lt;a ng-click="toggleImage(image)"&gt;
              &lt;img  ng-src="{{image.imgUrl}}" /&gt;                                 
          &lt;/a&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>    </h2>
  
  <pre><code>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'},
      {imgUrl: 'http://www.w3schools.com/js/pic_bulbon.gif'},
  ];
  
  $scope.toggleImage = function (image) {
      if (image === $scope.offUrl) {
  
          image.imgUrl = $scope.onUrl;
      } else {
  
          image.imgUrl = $scope.offUrl; 
  
      }
  };
  }  
  </code></pre>