Call a changing variable from outside the function

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);
});

I am having a problem getting the value of inputFormat on a constant basis. What happens is that I run my webpage/application and the $scope.width variable gets the first value of inputFormat and then stops. It doesn't continue to get the value after the value of inputFormat has changed. So my question is how would I call the inputFormat variable in a way that the $scope.width variable gets updated? I am new to angular and javascript, and hopefully you all can understand my question. Thanks for the help!

Here is the part of the html where I call $scope.width:

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

Answer 1

You should use ng-style and then just change $scope.width..