Untitled

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <my-toggle value="isOn" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle>
    <my-toggle value="!isOn" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle>
    <my-toggle-internal message="toggle me too" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle-internal>
    <my-toggle-internal message="toggle me too" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle-internal>
  </body>

</html>

// Code goes here

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

app.controller('myCtrl', function($scope){
    $scope.isOn = false;
  });
  
app.directive('myToggle', function(){
  return {
    scope: {
      value: '=',
      onUrl: '@',
      offUrl: '@'
    },
    link: link,
    restrict: 'E',
    replace: true,
    template: '<div><input type="checkbox" ng-model="value" />{{message}}<a href="" ng-click="toggle()"><img ng-src="{{ value ? onUrl : offUrl }}"></div>'
  }
  
  function link(scope, element, attrs){
    scope.value = false;
    scope.message = attrs.message || 'Toggle me';
    
    scope.toggle = toggle;
    
    function toggle(){
      scope.value = !scope.value;
    }
  }
});

app.directive('myToggleInternal', function(){
  return {
    scope: {
      onUrl: '@',
      offUrl: '@'
    },
    controller: controller,
    restrict: 'E',
    replace: true,
    template: '<div><input type="checkbox" ng-model="value" />{{message}}<a href="" ng-click="toggle()"><img ng-src="{{ value ? onUrl : offUrl }}"></div>'
  }
  
  function controller($scope, $element, $attrs){
    $scope.value = false;
    $scope.message = $attrs.message || 'Toggle me';
    
    $scope.toggle = toggle;
    
    function toggle(){
      $scope.value = !$scope.value;
    }
  }
});

/* Styles go here */