How to create reusable AngularJs directives that copy existing directives -

i in process of creating few reusable directives common controls in our application.

for example have snip-it of html amount text boxes

<div class='amount'>     <input type='text' ng-model='dollars'/> </div> 

from there started create directive:

app.directive("amount", function(){     return {         restrict: "e",         template: "<div class='amount'><input type='text'/></div>",         replace: true     } }); 

which renders following <html/>

<div class="amount ng-pristine ng-valid" ng-model="dollars">     <input type="text"> </div> 

now ng-model on <div/> not want, need create scope , attach ngmodel , things happy again.

app.directive("amount", function(){     return {         restrict: "e",         scope:{             ngmodel: "="         },         template: "<div class='amount'><input type='text' ng-model='ngmodel'/></div>",         replace: true     } }); 

everything works, lets want add in ngchange directive, mean again need alter scope include ngchange: "="? so

app.directive("amount", function(){     return {         restrict: "e",         scope:{             ngmodel: "=",             ngchange : "="         },         template: "<div class='amount'><input type='text' ng-model='ngmodel'/></div>",         replace: true     } }); 

the question

do need modify directives scope include infinite possible number of other directives might require? or there way copy directives on <amount/> element not <div/> <input/>

e.g.

<amount my-awesome-directive="" ng-disabled="form.$invalid" ng-model="dollarsandcents" ng-click="aclick()" ng-show="shouldshow()"/> 

turns into

<div class="amount">     <input my-awesome-directive="" type="text" ng-disabled="form.$invalid" ng-click="aclick()" ng-show="shouldshow()" ng-model="dollarsandcents"/> </div> 

can done during pre/post compile copy them on or going wrong?

update

i able working via looping on attributes , using $compile() service. work, correct?

app.directive("amount", function ($compile) {     return {         restrict: "e",         template: "<div class='amount'><input type='text' /></div>",         replace: true,         compile: function compile(telement, tattrs) {             return function (scope, ielement, iattrs) {                 var attributes = $(ielement).prop("attributes");                 var $input = $(ielement).find("input");                 $.each(attributes, function () { //loop on attributes , copy them <input/>                     if (this.name !== "class") {                         $input.attr(this.name, this.value);                     }                 });                 $compile($input)(scope);  //compile input             };         }     }; }); 

given following <html/> if add directive <amount/> gets copied down <input/>

<div ng-app="app">         <amount ng-model="dollars" ng-change="changed = 'i changed!!!'" ng-click="clicked= 'i clicked it!'" name="amount"></amount>          <h1>{{dollars}}</h1>          <h2>{{changed}}</h2>          <h3>{{clicked}}</h3>         <input type="button" value="remove" ng-click="items.splice(items.indexof(item), 1)"/>         <hr/> </div> 

updated jsfiddle

bind controller , inject $scope ease.

.controller('amount', ['$scope', function($scope) {     $scope.mymoney = '2'; }])  .directive("amount", function(){     restrict: 'ea',     replace: true,     controller: 'amount',     template: "<div class='amount'><input type='text' ng-model='mymoney'/></div>",     //cleaner include url if partial bigger.     //templateurl: '/views/amount.html',     link: function(scope, controller) {} });