Angular Model Updates from Outside / Legacy Javascript

by johnoscott

HTML

<h1>Angular Outside Update Test</h1>

<p>A timer external to the Angular scope attempts to update the model.</p>

<!-- Start Angular scope -->
<fieldset id="myAngularApp" title="Angular Scope" ng-app ng-controller="MainCntl">
    <h2>Angular Scope</h2>

    <!-- The ticks gets inserted here -->
    <p>Model Ticks: <span id="clock" ng-class="{odd:ticks%2}">{{ticks}}</span> </p>

    <!-- Uncomment to see a bound element value change also -->
    <!-- <p>Bound Ticks: <input type=text ng-model="ticks" placeholder="Waiting for input"/></p>
    -->

</fieldset>
<!-- End Angular scope -->

<p></p>

<fieldset>
    <h2>Outside (No Angular Scope)</h2>
    External Ticks : <span id="timerValue">-</span>
    <button onclick="timer.stop();">Stop</button>

</fieldset>

CSS

#clock { /* Style apply to element with id="clock" */
        font: bold 24pt sans; /* Use a big bold font */
        background: #ddf; /* On a light bluish-gray background */
        padding: 10px; /* Surround it with some space */
        border: solid black 2px; /* And a solid black border */
        border-radius: 10px; /* Round the corners (where supported) */
    }
    #clock.odd {
        background: #ff4500; /* On a light bluish-gray background */
    }

JavaScript

// Main Controller

    function MainCntl($window, $scope) {
        $scope.ticks = 0;

        $scope.setTicks = function(t) {
            // console.log("MainCntl.setTicks: " + t);
            $scope.ticks = t;
        }
    };