How to emulate the spin buttons action of the input [type="number] tag?

Question

JavaScript

Hello!
We have something like this input:

<input  type="number"
    id="{{ variable.opt.name }}"
    name = "{{ variable.opt.name }}"
    min  = "{{ variable.opt.min }}"
    max  = "{{ variable.opt.max }}"
    step = "{{ variable.opt.step }}"
    ng-model = "variable.opt.value">

Can you please tell me how to emulate the "up/down arrows" action of the input[type="number"] tag.
My actions:
Hid them with CSS:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}

Next, using jQuery:
1. Substitute my arrows

setTimeout(function () {
    angular.element('input[type="number"]').each(function () {
        var t = jQuery(this);

        t.wrap('<div class="sb"></div>');
        t
            .before('<div class="sb-arrow sb-up"><i class="fl-up-arrow"></i></div>')
            .after('<div class="sb-arrow sb-down"><i class="fl-down-arrow-2"></i></div>');
    });
}, 100);

2. I perform such manipulations (I catch clicking on the arrow and just replace the value):

angular.element('body').on('click', '.sb-arrow', function () {
    var t = jQuery(this),
        input = t.parent().children('input'),
        step = (input.attr('step')) ? Number(input.attr('step')) : 1;

    if (t.hasClass('sb-up')) {
        input.val(Number(input.val()) + step);
        console.log('click');
    } else if (t.hasClass('sb-down')) {
        input.val(Number(input.val()) - step);
    }
});

And it seems to be how everything works: the numbers change.
BUT! There is no change in the model :(
I tried this:

angular.element('body').on('click', '.sb-arrow', function () {
    var t = jQuery(this),
        input = t.parent().children('input'),
        step = (input.attr('step')) ? Number(input.attr('step')) : 1;

    if (t.hasClass('sb-up')) {
        var e = new jQuery.Event("keyup", { keyCode: 38 } );
        input.trigger(e)
    } else if (t.hasClass('sb-down')) {
        input.val(Number(input.val()) - step);
    }
});

So nothing happens at all.

Answer 1

Everything was solved by using the directive.
The code turned out something like this:
sb-input.js

(function () { 'use strict';

    var sbInput = function () { return {
        restrict: 'E',
        scope: {
            variable: '='
        },
        templateUrl: '/templates/sb-input.html',
        link: function(scope) {
            console.log(scope);
            scope.up = function ()   { scope.variable.opt.value += scope.variable.opt.step; };
            scope.down = function () { scope.variable.opt.value -= scope.variable.opt.step; };
        }
    };};

    angular
        .module('myApp')
        .directive('sbInput', sbInput);

})();

sb-input.html

<div class="sb">
    <div class="sb-arrow sb-up" ng-click="up()"><i class="fl-up-arrow"></i></div>
    <input type="number" min="{{ variable.opt.min }}" max="{{ variable.opt.max }}" step="{{ variable.opt.step }}" ng-model="variable.opt.value">
    <div class="sb-arrow sb-down" ng-click="down()"><i class="fl-down-arrow-2"></i></div>
</div>

Well, an example call:
<sb-input variable="variable"></sb-input>

Answer 2

So try to make a change directly in the model.