Angular copy attributes directive

copy attributes and compile template

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div ng-app="app" ng-init="items = [1,2,3]">
    <div ng-repeat="item in items">
        {{item}}
        <amount style="background-color:red" 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>
</div>

CSS

.amount {
    border: solid 1px black;
    padding: 10px;
}

JavaScript

var app = angular.module("app", []);
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 over all attributes and copy them to the <input/>
                    if (this.name !== "class") {
                        $input.attr(this.name, this.value);
                    }
                });
                $compile($input)(scope); //compile the input
            };
        }
    };
});