Angular JS range input issue - angularjs

Question

when the all corners range input is moved, the rest of the inputs work fine but when another corner range is moved the all corners move 1~3 pixels, what could be the issue here?
Demo here:
http://jsfiddle.net/g10fsxym/
code:
var myApp = angular.module('myApp', []);
myApp.controller('myAppCtrlr', function($scope) {
var allcorners = new Quantity(5);
var topLeft = new Quantity(5);
var topRight = new Quantity(5);
var bottomLeft = new Quantity(5);
var bottomRight = new Quantity(5);
$scope.brCorners = allcorners;
$scope.brTopLeft = topLeft;
$scope.brBottomLeft = bottomLeft;
$scope.brTopRight = topRight;
$scope.brBottomRight = bottomRight;
$scope.brTopLeftCorner = function() {
$scope.brTopLeft = topLeft;
}
$scope.brBottomLeftCorner = function() {
$scope.brBottomLeft = bottomLeft;
}
$scope.brTopRightCorner = function() {
$scope.brTopRight = topRight;
}
$scope.brBottomRightCorner = function() {
$scope.brBottomRight = bottomRight;
}
$scope.brAllCorners = function() {
$scope.brTopLeft = $scope.brCorners;
$scope.brTopRight = $scope.brCorners;
$scope.brBottomLeft = $scope.brCorners;
$scope.brBottomRight = $scope.brCorners;
}});
function Quantity(value) {
var qty = value;
this.__defineGetter__("qty", function() {
return qty;
});
this.__defineSetter__("qty", function(val) {
val = parseInt(val);
qty = val;
});}`

Answer 1

Just make a copy of $scope.brCorners (otherwise you are working with references, so when you change one variable the another is also changed).
Demo
$scope.brAllCorners = function() {
$scope.brTopLeft = angular.copy($scope.brCorners);
$scope.brTopRight = angular.copy($scope.brCorners);
$scope.brBottomLeft = angular.copy($scope.brCorners);
$scope.brBottomRight = angular.copy($scope.brCorners);
}