angularJS: how to break the link between the model and the view

Question

angularJS: how to break the link between the model and the view

I wondering if it is possible at runtime to break the link between the model and the view.
In the following example, all the are link together (through the text model). When I click the button I want to make angular to not update the last input any more (for example to start some jquery effects...).

<html ng-app>
  <head>
    <script src="angular-1.0.1.js"></script>
  </head>
  <body>
    <input ng-model="text"/><br/>
    <input ng-model="text"/><br/>
    <input ng-model="text"/><input type="button" value="<- break!" ng-click="???"/><br/>
  </body>
</html>

My real case is here: http://jsfiddle.net/5JZPH/10/
In the jsfiddle example I expect that the old values (these that are fading) do not change any more when I press the '+' button.

javascript
angularjs

Answer 1

You can fadeOut jQuery-cloned html element: http://jsfiddle.net/5JZPH/29/

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>

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;

                    linker(newScope, function(clone) {

                        if ( prevClone ) {

                            newPrevClone = prevClone.clone();
                            prevClone.after(newPrevClone);
                            prevClone.remove();
                            newPrevClone.fadeOut(2000, function() { $(this).remove() });
                        }

                        iterStartElement.after(clone);

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