Angular: Computetd properties

http://angularjs.org/

HTML

<script src="http://resources.holycrap.ws/jscripts/tiny_mce/tiny_mce.js"></script>
<script src="http://resources.holycrap.ws/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script src="http://code.angularjs.org/0.10.4/angular-0.10.4.min.js" ng:autobind></script>
<div ng:controller="ComputedPropertiesCtrl">
    <h1>before: </h1>
    {{data_before}}
    <h1>after: </h1>
    a <input ng:model="data.a"> + b <input ng:model="data.b"> = {{cp}}
</div>

CSS

h2 { position: fixed; right: 10px; top: 10px; color: red; background:white;z-index:1000; }
input { width: 30px; }

JavaScript

function ComputedPropertiesCtrl() {
    var scope = this;
    scope.data = { a: 5, b: 10 };
    
    scope.add = function() {
        return scope.data.a*1 + scope.data.b*1;
    };
    scope.$watch('data', function(currScope,newVal,oldVal) {
        scope.data_before = { a: oldVal.a, b: oldVal.b };
        scope.cp = scope.add();
    });
        
}