lightbulb-no sync

How to toggle State and image ng-true-value,ng-click,ng-src

by gogirl

HTML

<body ng-app="myApp">
    <div my-Red>T</div>
  <div ng-controller="MyCtrl">

   lightbulb is {{state}}     <input type="checkbox" ng-model=
   "state" ng-true-value="on" ng-false-value="off"> 

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

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

JavaScript

var myApp = angular.module('myApp', []);
myApp.directive('myRed', function () {
    return function (scope, element, attrs) {
      element.css({
        'color': 'red',
        'background-color':'#EEEEEE'

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

  $scope.toggleImage = function (state) {
    onUrl = 'http://www.w3schools.com/js/pic_bulbon.gif'
    offUrl = 'http://www.w3schools.com/js/pic_bulboff.gif'
    if (state === "on") {
        imgUrl = onUrl;
    } else {
        imgUrl = offUrl; 
    }
    return imgUrl;
    };
    $scope.toggleState = function (state) {
        if (state === "on") {
            state = "off";
        } else {        
            state = "on";
        }
       return state;
    };
    
    
    
}