angularjs - Bind custom methods and class mentioned in HTML to Directive template -

hi have created directive toggle button.

directive

app.directive('togglebtn',[function () {     return {       restrict: 'ea',       replace: true,       require: ['name', '^ngmodel'],       scope: {         isdisabled: '=',         name: '@',         ngmodel: '='       },       template:           ' <div class="toggle-switch on off"> ' +           '     <input ng-model="ngmodel" id="{{name}}" type="checkbox" ng-disabled="{{isdisabled}}" ' +           '         hidden=""><label for="{{name}}" ' +           '         class="ts-helper"></label> ' +           ' </div> '     };   }]); 

html

 <input ng-model="sample1" name="sample1"                             type="checkbox" class="someclass" ng-change="dosomething()" toggle-btn> 

directive working fine, except ng-change. ng-change attribute added div, not input-checkbox.

how add attributes input-checkbox?

not ng-change, there can other attributes also. ng-focus, title, ng-click, etc... (ng-click , title work append main div, i'm giving example here).

plunkr demo here

change code this

var app = angular.module('plunker', []);  app.controller('mainctrl', function($scope) {   $scope.name = 'world';   $scope.dosomething = function() {     console.log("do something");    } });  app.directive('togglebtn', [function() {   return {     restrict: 'ea',     replace: true,     require: ['name', '^ngmodel'],     scope: {       isdisabled: '=',       name: '@',       ngmodel: '=',       ngchange: '&'     },     template: ' <div class="toggle-switch on off"> ' +       '     <input ng-model="ngmodel" id="{{name}}" type="checkbox" ng-change="ngchange()" ng-disabled="{{isdisabled}}" ' +       '         hidden=""><label for="{{name}}" ' +       '         class="ts-helper"></label> ' +       ' </div> '   }; }]); 

demo