javascript - Custom directive - two way binding not working -

i trying write simple custom directive in angular turns tag toggle button (similar checkbox). code have written far updates internal variable (isolated scope) 2 way binding doesn't seem work. when click button, button toggles (the css class appearing , disappearing) myvariable not updating.

any appreciated!

usage

<button toggle-button="myvariable">my button</button> 

directive code

( function() {  var directive = function () {      return {          restrict: 'a',          scope: {             togglebutton: '=checked'         },          link: function( $scope, element, attrs ) {              $scope.$watch('checked', function(newval, oldval) {                 newval ? element.addclass ('on') : element.removeclass('on');             });              element.bind('click', function() {                 $scope.checked = !$scope.checked;                 $scope.$apply();             });         }     }; };   angular.module('myapp')     .directive('togglebutton', directive );  }()); 

just replace

scope: {             togglebutton: '=checked'         } 

to

 scope: {             checked: '=togglebutton'         }