Numeric Select Box

/*Downloaded from https://www.codeseek.co/007design/numeric-select-box-bqogzm */
.numeric-select select {
  -webkit-appearance: none;
  height: 30px;
  width: 25px;
  text-align: center;
  padding: 0 0 0 8px;
  margin: 0 3px;
  border: 1px solid black;
}
.numeric-select select::selection {
  background-color: transparent;
}
.numeric-select .minus-button,
.numeric-select .plus-button {
  border-radius: 50%;
  background-color: blue;
  color: white;
  padding: 3px;
  text-align: center;
  width: 20px;
  height: 20px;
  display: inline-block;
  cursor: pointer;
}
.numeric-select .minus-button::selection,
.numeric-select .plus-button::selection {
  background-color: transparent;
}
.numeric-select .minus-button.disabled,
.numeric-select .plus-button.disabled {
  background-color: grey;
}

/*Downloaded from https://www.codeseek.co/007design/numeric-select-box-bqogzm */
angular.module('app', [])
.controller('formCtrl', ['$scope', function($scope) {
  $scope.form = {num: 0};
  $scope.numbers = [0,1,2]
}])

.directive('selectCustomization', ['$timeout', '$compile', function($timeout, $compile) {
  return {
    require: ['ngModel','select'],
    link: function(scope, elem, attrs, ctrls) {
      var ctrl = ctrls[0];
      var minus = $compile('<span class="minus-button" data-ng-click="minus()" data-ng-class="{disabled: isMinusDisabled()}">-</span>')(scope);
      var plus = $compile('<span class="plus-button" data-ng-click="plus()" data-ng-class="{disabled: isPlusDisabled()}">+</span>')(scope);
      elem.after(plus);
      elem.before(minus);
      
      var options = [];
      
      scope.toint = function(x) {
        return parseInt(x, 10);
      };

      $timeout(function() {
        elem.children().each(function() {
          options.push(parseInt($(this).attr('value')));
        });
        ctrl.$setViewValue(scope.toint(attrs.selectCustomization));
        ctrl.$render();
      });
      
      scope.plus = function() {
        var current = options.indexOf(ctrl.$viewValue);
        if (current < options.length-1)
          ctrl.$setViewValue(options[current+1]);
        ctrl.$render();
      };

      scope.minus = function() {
        var current = options.indexOf(ctrl.$viewValue);
        if (current > 0)
          ctrl.$setViewValue(options[current-1]);
        ctrl.$render();
      };
      
      scope.isMinusDisabled = function() {
        var current = options.indexOf(ctrl.$viewValue);
        return current <= 0;
      };
      
      scope.isPlusDisabled = function() {
        var current = options.indexOf(ctrl.$viewValue);
        return current >= options.length-1;
      };
    }
  };
}]);