t8g/index.html

## index.html
<!doctype html>
<html ng-app="ui">
  <head>
    <meta charset="UTF-8">
    <title>Angular numeric Stepper</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, maximum-scale=1" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap-theme.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.css" />
    <style>
    .ui-stepper{
      position:relative;
    }

    .stepper-bt{
      position:absolute;
      right:0;
      height:15px;
      border:#ccc 1px solid;
      font-size:.8em;
      background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fff), to(#e6e6e6)); // Safari 4+, Chrome 2+
      background-image: -webkit-linear-gradient(top, #fff, 0%, #e6e6e6, 100%); // Safari 5.1+, Chrome 10+
      background-image:  -moz-linear-gradient(top, #fff 0%, #e6e6e6 100%); // FF 3.6+
      background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%); // Standard, IE10
      background-repeat: repeat-x;

      display: inline-block;
      padding: 0 .5em;
      margin-right:-3px;
    }

    .stepper-bt:hover{
      background: #dedede;
      background-image: none;
    }
    .stepper-bt:active{
      background: #efefef;
      background-image: none;
    }

    .stepper-bt__up{
      top:0;
      border-top-right-radius: 3px;
    }
    .stepper-bt__up .caret{
      position:relative;
      top:-2px;
    }
    .stepper-bt__down{
      border-bottom-right-radius: 3px;
      bottom:0;
    }
    </style>
  </head>
  <body>
    <div ng-controller="AppController">
      <ui-stepper min="0" max="12" ng-model="hours" step-size="1"></ui-stepper>
      <span class="help-block text-left">{{hours}} hours</span>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
    <script src="/js/ui.stepper.js"></script>
    <script src="/js/app.js"></script>
  </body>

</html>

## main.js
var app = angular.module('ui', ['ui.stepper']);

app.controller('AppController', ['$scope',
  function($scope){
    $scope.hours="0";
  }
]);

## stepper.html
<div class="ui-stepper input-group">
  <input type="text" class="form-control input-sm" ng-model="hours" />
  <a class="stepper-bt stepper-bt__up dropup" ng-click="increment()">
    <i class="caret"></i>
    <span class="sr-only">Increment</span>
  </a>
  <a class="stepper-bt stepper-bt__down" ng-click="decrement()">
     <span class="caret"></span>
    <span class="sr-only">Decrement</span>
  </a>
</div>

## ui.stepper.js
angular.module('ui.stepper', [])
.constant('stepperConfig',{
  stepSize: 10,
  min: 0,
  max: 100
})
.directive('uiStepper', ['stepperConfig','$parse',
  function(stepperConfig, $parse ){
    return {
      restrict: 'E',
      templateUrl: 'view/stepper.html',
      require: 'ngModel',
      scope: {
      	'hours': '=ngModel'
      },
      link: function(scope, element, attrs, ngModel ){
        // Set default values
        attrs.min = parseInt(attrs.min || stepperConfig.min, 10);
        attrs.max = parseInt(attrs.max || stepperConfig.max, 10);
        attrs.stepSize = parseInt(attrs.stepSize || stepperConfig.stepSize, 10);

        var input = element.find('input');

        // Allow user to increment / decrement using arrow key
        input.bind('keydown', function(evt){
          var key = evt.charCode || evt.keyCode || 0;
          if (key === 38) {
            scope.increment();
            scope.$apply();
          }
          if (key === 40){
            scope.decrement();
            scope.$apply();
          }
        });

        // Prevent user to enter non numeric char
        input.bind('keypress', function(evt){
          var key = evt.charCode || evt.keyCode || 0;
          if ( !/[0-9]/.test( String.fromCharCode(key) )) {
            evt.preventDefault();
            return false;
          }
        });

        scope.increment = function(){
          input[0].focus();
          ngModel.$setViewValue(Math.min(parseInt(ngModel.$modelValue, 10) + attrs.stepSize, attrs.max));
        };

        scope.decrement = function(){
          input[0].focus();
          ngModel.$setViewValue(Math.max(parseInt(ngModel.$modelValue, 10) - attrs.stepSize, attrs.min));
        };

      }
    };
  }
]);
	<!doctype html>
	<html ng-app="ui">
	<head>
	<meta charset="UTF-8">
	<title>Angular numeric Stepper</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, maximum-scale=1" />
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap-theme.css" />
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.css" />
	<style>
	.ui-stepper{
	position:relative;
	}

	.stepper-bt{
	position:absolute;
	right:0;
	height:15px;
	border:#ccc 1px solid;
	font-size:.8em;
	background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fff), to(#e6e6e6)); // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(top, #fff, 0%, #e6e6e6, 100%); // Safari 5.1+, Chrome 10+
	background-image: -moz-linear-gradient(top, #fff 0%, #e6e6e6 100%); // FF 3.6+
	background-image: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%); // Standard, IE10
	background-repeat: repeat-x;

	display: inline-block;
	padding: 0 .5em;
	margin-right:-3px;
	}

	.stepper-bt:hover{
	background: #dedede;
	background-image: none;
	}
	.stepper-bt:active{
	background: #efefef;
	background-image: none;
	}

	.stepper-bt__up{
	top:0;
	border-top-right-radius: 3px;
	}
	.stepper-bt__up .caret{
	position:relative;
	top:-2px;
	}
	.stepper-bt__down{
	border-bottom-right-radius: 3px;
	bottom:0;
	}
	</style>
	</head>
	<body>
	<div ng-controller="AppController">
	<ui-stepper min="0" max="12" ng-model="hours" step-size="1"></ui-stepper>
	<span class="help-block text-left">{{hours}} hours</span>
	</div>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
	<script src="/js/ui.stepper.js"></script>
	<script src="/js/app.js"></script>
	</body>

	</html>
	var app = angular.module('ui', ['ui.stepper']);

	app.controller('AppController', ['$scope',
	function($scope){
	$scope.hours="0";
	}
	]);
	<div class="ui-stepper input-group">
	<input type="text" class="form-control input-sm" ng-model="hours" />
	<a class="stepper-bt stepper-bt__up dropup" ng-click="increment()">
	<i class="caret"></i>
	<span class="sr-only">Increment</span>
	</a>
	<a class="stepper-bt stepper-bt__down" ng-click="decrement()">
	<span class="caret"></span>
	<span class="sr-only">Decrement</span>
	</a>
	</div>
	angular.module('ui.stepper', [])
	.constant('stepperConfig',{
	stepSize: 10,
	min: 0,
	max: 100
	})
	.directive('uiStepper', ['stepperConfig','$parse',
	function(stepperConfig, $parse ){
	return {
	restrict: 'E',
	templateUrl: 'view/stepper.html',
	require: 'ngModel',
	scope: {
	'hours': '=ngModel'
	},
	link: function(scope, element, attrs, ngModel ){
	// Set default values
	attrs.min = parseInt(attrs.min \|\| stepperConfig.min, 10);
	attrs.max = parseInt(attrs.max \|\| stepperConfig.max, 10);
	attrs.stepSize = parseInt(attrs.stepSize \|\| stepperConfig.stepSize, 10);

	var input = element.find('input');

	// Allow user to increment / decrement using arrow key
	input.bind('keydown', function(evt){
	var key = evt.charCode \|\| evt.keyCode \|\| 0;
	if (key === 38) {
	scope.increment();
	scope.$apply();
	}
	if (key === 40){
	scope.decrement();
	scope.$apply();
	}
	});

	// Prevent user to enter non numeric char
	input.bind('keypress', function(evt){
	var key = evt.charCode \|\| evt.keyCode \|\| 0;
	if ( !/[0-9]/.test( String.fromCharCode(key) )) {
	evt.preventDefault();
	return false;
	}
	});

	scope.increment = function(){
	input[0].focus();
	ngModel.$setViewValue(Math.min(parseInt(ngModel.$modelValue, 10) + attrs.stepSize, attrs.max));
	};

	scope.decrement = function(){
	input[0].focus();
	ngModel.$setViewValue(Math.max(parseInt(ngModel.$modelValue, 10) - attrs.stepSize, attrs.min));
	};

	}
	};
	}
	]);