javascript - 関数の外から変化する変数を呼び出す

Question

var slider = document.getElementById('test5');
noUiSlider.create(slider, {
    start: [1366],
    step: 1,
    range: {
        'min': 200,
        'max': 1920
    },
    format: wNumb({
        decimals: 0,
        postfix: 'px',
    })
});

var app = angular.module('myApp', []);

app.controller('myWidth', function ($scope) {
    $scope.width = inputFormat.value;

    $scope.$watch('width', function (newValue, oldValue) {
        console.log('Old:' + oldValue);
        console.log('New:' + newValue);
    });
    console.log($scope.width + ' - scope width');
});
var inputFormat = document.getElementById('input-format');
editorContainer = document.getElementById('editorContainer');
slider.noUiSlider.on('update', function (values, handle) {
    inputFormat.value = values[handle];
    //$(editorContainer).css('width', values[handle]);
});
inputFormat.addEventListener('change', function(){
    slider.noUiSlider.set(this.value);
});

定数ベースで inputFormat の値を取得する際に問題が発生しています。Web ページ/アプリケーションを実行すると、$scope.width 変数が inputFormat の最初の値を取得してから停止します。inputFormat の値が変更された後、値を取得し続けません。私の質問は、$scope.width 変数が更新されるように、inputFormat 変数をどのように呼び出すかということです。私はangularとjavascriptが初めてなので、私の質問を理解していただければ幸いです。助けてくれてありがとう！

$scope.width を呼び出す html の部分は次のとおりです。

<div class="" <!--id="editorContainer"--> style="position: absolute; top: 10px;    bottom: 10px; right: 10px; left: 10px; width: {{width}};"