How to do this in AngularJS?

Question

Angular

AngularJS is just learning, so don't kick me.
There is such code - jsfiddle.net/tctkopre/1

<script>
  var app = angular.module('foo', [])
  app.controller('userCtrl', function ($scope) {
      $scope.first = 1;
      $scope.two = 2;
      $scope.tree =  $scope.first + $scope.two;
  });
</script>

<div ng-controller="userCtrl">
  <input ng-model="first" type="number" />
  <input ng-model="two" type="number" />
  <h1>{{tree}}</h1>	
</div>

You need to add these two numbers in the controller. Probably, the line
$scope.tree = $scope.first + $scope.two;
needs to be moved to a separate controller and somehow pass the value of $scope.first and $scope.two, but I don’t know how.
UPD 22.04.2016 12.52
Ok. I'm probably not asking correctly. And how can I revive this code:

<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

<div ng-controller="userCtrl">
  <input ng-model="first" type="number" />
  <input ng-model="two" type="number" />
  <h1>{{ first + two }}</h1>	
</div>

Answer 2

If you need through the controller, you can make a function:

$scope.tree =  function() { return $scope.first + $scope.two; }

{{tree()}}

But in this case, it's simpler: {{ first + two }}