Hide/show input to format number using label in angular

by Tarek Faham

HTML

<div ng-app ng-controller="InputCtrl">
    <input id="id" type="number" ng-model="mynum1"><label for="id">{{mynum1 | number}}</label><br>
</div>

CSS

label { position: absolute; background: white; left:10px; top: 0px; cursor: pointer; }
input { position: relative; width: 200px;    
  opacity:0;
  /*position: absolute;
   top: -9999px;
   left: -9999px; */
   /*display:none*/}
input, label { padding: 0; border: 1px solid black; width: 200px; font-family: Arial; line-height: 20px; }
input:focus + label { display: none; }
input:focus {
  /*position:relative;
  top:0; left:0;*/
  opacity:1;
}

JavaScript

//Source:
//  http://stackoverflow.com/a/24057713/4180447
angular.module('test', []).controller('InputCtrl', function($scope, $filter) {
    $scope.mynum1 = 50000000;
});