Вызов изменяемой переменной извне функции

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 на постоянной основе. Случается, что я запускаю свою веб-страницу/приложение, а переменная $ scope.width получает первое значение inputFormat, а затем останавливается. Он не будет продолжать получать значение после изменения значения inputFormat. Поэтому мой вопрос в том, как я могу вызвать переменную inputFormat таким образом, чтобы переменная $ scope.width обновлялась? Я новичок в угловой и javascript, и, надеюсь, вы все поймете мой вопрос. Спасибо за помощь!

Вот часть html, где я называю $ scope.width:

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