How to animate code with AngularJS?

Question

Angular

jsfiddle.net/tctkopre/2

<script>
  var app = angular.module('foo', []);

  app.controller('userCtrl', function ($scope) {
      $scope.sum = $scope.range1 + $scope.range2;
  });
</script>

<div ng-controller="userCtrl">
  <input ng-model="range1" type="range" value="10" />
  <input ng-model="range2" type="range" value="10" />
  <h1>{{sum}}</h1>	
</div>

A solution like {{range1+range2}} is not suitable, because later you need to make several comparisons of the result and push them into the template, probably not right.

Answer 1

var app = angular.module('foo', []);

  app.controller('userCtrl', function ($scope) {
  		 $scope.one = 10;
       $scope.two = 10;
       $scope.$watch('one', function(newValue, oldValue) {
               summa();
        });
        $scope.$watch('two', function(newValue, oldValue) {
               summa();
        });
        
        function summa(){
        	 $scope.sum = parseInt($scope.one) + parseInt($scope.two);
        }

  });

Answer 2

in the settings of the [javascript] field in jsfiddle in the field frameworks & extensions -> AngularJS 1.4.8