scrolling on angular

HTML

<div ng-app="test" ng-controller="Ctrl1">
  <div id="inbound">
    <h2>in</h2>
    <input type="text" ng-model="inTxt">
  </div>
  <div id="outbound">
    <h2>out</h2>
    <input type="text" ng-model="outTxt">
    <button ng-click="process()">Process</button>
  </div>
  <div id="fare" ng-show="showFare">
    <h2>fare</h2>
  </div>
</div>

CSS

#inbound,
#outbound,
#fare {
  height: 300px;
  border: 1px solid black;
  margin: 5px;
  padding: 10px;
}

JavaScript

angular.module("test", [])
.controller("Ctrl1", function($scope, $timeout, $window) {
	$scope.showFare = false;
  $window.scrollTo(0, 5000);  
  $scope.process = function() {
  	$scope.showFare = true;
    $timeout(function() {
      var element = $window.document.querySelector("#fare");
      var distance = element.getBoundingClientRect().top;
    	$window.scrollTo(0, distance);
    });
  }
});