AngularJS Example:

by johnoscott

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!-- 

-->


<h1>Angular Polling Update with Interval</h1>

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

<fieldset id="myAngularApp" title="Angular Scope" ng-app ng-controller="MainCtrl">
    <h2>Angular Scope</h2>

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

    <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

function MainCtrl($scope) {
    $scope.ticks = 0;

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


var timer = {
        elapsed : 0,
        period : 1000,
        intervalTimer : null,
        start : function (f) {
            // http://stackoverflow.com/questions/1276137/how-to-pass-an-array-object-to-the-setinterval-function
            var that = {timer : this, callback : f}; // create closure for setInterval
            this.intervalTimer = window.setInterval(function () {
                that.timer.elapsed += 1;
                // console.log("interval: " + that.timer.elapsed);
                that.callback(that.timer.elapsed);
            }, this.period)
        },
        stop : function () {
            if (this.intervalTimer) {
                window.clearInterval(this.intervalTimer);
                this.intervalTimer = null;
            }
        },
        isRunning : function () {
            return !this.intervalTimer
        }
    };

    document.addEventListener("DOMContentLoaded", init, false);

    function init() {

       timer.start(function(elapsed){
           var elt = document.getElementById("timerValue");
           elt.innerText = elapsed;

           updateAngularModel(elapsed);
       })

    }

    function updateAngularModel(newTicks) {

    /*
     Call Angular JS from legacy code

     http://stackoverflow.com/questions/10490570/call-angular-js-from-legacy-code

    Interop from outside of angular to angular is same as debugging angular application or integrating with third party library.
            For any DOM element you can do this:
    • angular.element(domElement).scope() to get the current scope for the element
    • angular.element(domElement).injector() to get the current app injector
    • angular.element(domElement).controller() to get a hold of the ng-controller instance.
    From the injector you can get a hold of any service in angular...