Question: I am working with an AngularJS powered page, and I need to display a running clock inside a read-only input text field (two way bound with `data-ng-model)`. To simulate a running clock, I am using a JavaScript scheduler with `setTimeout` to call a function every 1000 milliseconds, which updates the $scope'd property value which in turn is bound to that input text field. Somehow the value in the input field is not getting updated. So I placed a `<pre />` tag and updated its content using a jQuery selector. That is working fine, so I need help getting the input text field value to also get updated every second.

I have set up a [jsFiddle](https://jsfiddle.net/webuser7/0qdb621e/) for this example.

The HTML is below:

```
<body data-ng-app="formApp">
    <div data-ng-controller="FormCtrl">
        Current Date and Time <input type="text" data-ng-model="formData.currentDateTime" readonly="readonly" size="60" />
    </div>
    <pre id="currentDateTime" style="font-size:1.5em;">
    </pre>
</body>

```

The AngularJS app module and controller are declared as follows:

```
(function() {
    var formApp = angular.module("formApp", []);

    formApp.controller("FormCtrl", function ($scope) {
        $scope.formData = {};
        $scope.formData.currentDateTime = new Date().toString();

        (function updateCDT() {
            $scope.formData.currentDateTime = new Date().toString();
            document.getElementById("currentDateTime").innerHTML = $scope.formData.currentDateTime;
            setTimeout(updateCDT, 1000);
        })();
    });
})();

```

Answer: 
you need to use `$scope.$apply()` or angulars `$timeout` to reflect changes since setTimeout is outside the scope of angularjs

**using $scope.$apply()**

apply $scope.$apply() inside anonymous function of setTimeout(function(){},1000) and then call the actual function like below

```
   (function updateCDT() {
        $scope.formData.currentDateTime = new Date().toString();
        document.getElementById("currentDateTime").innerHTML
  = $scope.formData.currentDateTime;
        setTimeout(function(){
          $scope.$apply();
            updateCDT()
        }, 1000);

```

[fiddle](https://jsfiddle.net/0qdb621e/30/) for $scope.$apply()

**using $timeout** (dont forget to inject it into controller)

```
 (function updateCDT() {
            $scope.formData.currentDateTime = new Date().toString();
            document.getElementById("currentDateTime").innerHTML
    = $scope.formData.currentDateTime;
            $timeout(updateCDT, 1000);

        })();

```

[fiddle](https://jsfiddle.net/0qdb621e/26/) for $timeout
Just do the same as in the pre tag:

```
document.getElementById("input-field").value=$scope.formData.currentDateTime;

```

Hope it helps!