Flickering issue when drawing div in Angular - angularjs

Question

In this plunk I have a div that needs to be drawn dragging the mouse. I'm using mouse up/move/down events. The problem that I have is that the div "flickers" when I drag down. How to fix this?
HTML
<style>
.frame {
width: 300px;
height: 300px;
background-color: orange;
position: relative;
}
.sel{
border:2px solid black;
background-color: #ffffff;
position:absolute;
}
</style>
<div class="frame" ng-mousedown="mouseDown($event)"
ng-mousemove="mouseMove($event)"
ng-mouseup="mouseUp()">
<div class="sel" ng-show="show"
ng-style="{top:selTop+'px', left:selLeft+'px', width:selWidth+'px', height:selHeight+'px'}"></div>
</div>
Javascript:
var app = angular.module('app', []);
app.controller('ctl', function ($scope) {
$scope.startPoint = {};
$scope.show = false;
$scope.mouseDown = function(event) {
$scope.startPoint = { x: event.offsetX, y: event.offsetY };
$scope.show = true;
};
$scope.mouseMove = function(event) {
if (!$scope.startPoint.x)
return;
$scope.selTop = $scope.startPoint.y;
$scope.selLeft = $scope.startPoint.x;
$scope.selHeight = event.offsetY - $scope.startPoint.y;
$scope.selWidth = event.offsetX - $scope.startPoint.x;
};
$scope.mouseUp = function() {
$scope.startPoint = {};
$scope.show = false;
};
});

Answer 1

just add these css properties
border: none;
color: transparent;
text-shadow: 0 0 0 gray;
text-align: center;
&:focus {
outline: none;
}
see the plunker http://embed.plnkr.co/9WntGyBLQxYSxkFjDAy2/