Reuse directive multiplie times with dynamic attributes in another directive's template

Question

What i want to do is to be able to use a directive with different attributes in the same ng-app. The main goal is to run different code when the directive's input (ng-model) changes. This is what i have now:

app.directive('customInput',
    function ($compile) {
        var customInputDefinitionObject = {
            restrict: 'E',
            replace: true,
            scope: {
                ident: '@'
            },
            template: '<input type="text" >',
            controller: 'customInputController',
            compile: function (tElement, tAttrs) {
                $('input').removeAttr('ident')
                    .attr('ng-model', tAttrs.ident)
                    .attr('ng-change', tAttrs.ident + 'Change()');

                var elemLinkFn = $compile(tElement);
                return function (scope, element) {
                    elemLinkFn(scope, function (clone) {
                        element.replaceWith(clone);
                    })
                }
            }
        }
        return customInputDefinitionObject;
    });

It works well in html e.g.:

<custom-input ident="var1"></custom-input>
<custom-input ident="var2"></custom-input>

i'm going to get to input with different ng-model and ng-change function, the controller uses dynamic names to get the $scope variables( $scope.var1Change).

The problem start when i want to use this directive inside another template.

app.directive('customInputGroup', function ($compile) {
    var customInputGroupDefinitonObject = {
        restrict: 'E',
        replace: true,
        scope: {
            rident: '@',
        },
        template:''+
        '<div>'+
           '<custom-input id="first"></custom-input>'+
           '<custom-input id="second"></custom-input>'+
        '</div>',
        controller: 'customInputGroupController',
        compile: function (elem, attrs) {
            $('#first', elem).removeAttr('id').attr('ident', attrs.rident + 'Start');
            $('#second', elem).removeAttr('id').attr('ident', attrs.rident + 'End');

            var rangeLinkFn = $compile(elem);
            return function (scope, element) {
                rangeLinkFn(scope, function (clone) {
                    element.replaceWith(clone);
                })
            }
        }
    }
    return customInputGroupDefinitonObject;
});

In this case if i'm going to use it inside the HTML e.g.:

<custom-input-group rident='sg'></custom-input-group>

what i get rendered:

<div>
   <input ng-model="sgEnd" ng-change="sgEndChange()">
   <input ng-model="sgEnd" ng-change="sgEndChange()">
   <input ng-model="sgEnd" ng-change="sgEndChange()">
</div>

For the 3rd rendered input the ng-change does not working.

If set terminal:ture in the inputGroup directive i get only to "input" rendered but both of them has the same ng-model and ng-change.

So how can i make it to render something like this:

<div>
   <input ng-model="sgStart" ng-change="sgStartChange()">
   <input ng-model="sgEnd" ng-change="sgEndChange()">
</div>

And if u know how would u be so nice to let me know only the "how" but the "why" aswell. Thank you in advance.