JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test">
<input type="button" value=" + " ng-click="index = index + 1"/>
    <input ng-model="index" smooth="index" style="display:block"/>
    [{{index}}]
</div>

CSS

</style>
<script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script>
<style>

JavaScript

angular.module('test', [])
.directive('smooth', function() {
    return {
        transclude: 'element',
        priority: 750,
        terminal: true,
        compile: function(element, attr, linker) {
            return function(scope, iterStartElement, attr) {

                var prevClone = null;

                scope.$watch(attr.smooth, function() {

                    var newScope = scope/*.$new()*/;

                    linker(newScope, function(clone) {

                        if ( prevClone ) {

                            prevClone.data('$scope').$destroy();
                            prevClone.fadeOut(2000, function() { $(this).remove() });
                        }

                        iterStartElement.after(clone);

                        prevClone = clone;
                    });
                });
            }
        }
    };
})