Angular: Computed 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="c.a"> + b <input ng:model="c.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.a = 5;
    scope.b = 10;
    scope.c = {a:1,b:2,c:1000};
    scope.data_before = [];
    scope.add = function() {
        return scope.c.a*1 + scope.c.b*1;
    };
    scope.$watch('scope.c[a, b]', function(currScope,newVal,oldVal) {
        scope.data_before = oldVal;
        scope.cp = scope.add();
    });
        
}