lightbulb-no sync

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

HTML

<body ng-app="myApp">
  <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', []);

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 = "off";
        }
       return state;
    };
    
    
    
}