現在時刻

１秒(1000 ミリ秒)毎に現在時刻を表示します。

現在時刻： 9：34：42
スタート  ストップ

次のリンクをクリックすると "ngp_time.html" が呼び出されます。
現在時刻を表示

プログラムの説明

AngularJS サンプルプログラム "ngp_time.html" です。

<!doctype html>
<html ng-app="myApp">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyController',
  function($scope, $interval)
  { $scope.message = '現在時刻を表示';
    var t;
    // スタートボタンで1000ミリ秒単位に処理を実行
    $scope.onStart = function()
    { t = $interval(function()
          { $scope.message = '現在時刻：' + (new Date()).toLocaleTimeString();
          }, 1000);
    }
    // ストップボタンでタイマー処理を中止
    $scope.onStop = function()
    { $interval.cancel(t);
    };
  });
</script>
</head>

<body ng-controller="MyController">
<div>{{message}}</div>
<button ng-click="onStart()">スタート</button>
<button ng-click="onStop()">ストップ</button>
</body>

</html>

myApp モジュールを作成して myController コントローラーを登録します。

var app = angular.module('myApp', []);
app.controller('MyController',
  function($scope, $interval)
  { $scope.message = '現在時刻を表示';
    var t;

時刻の表示を開始する onStart 関数です。

    $scope.onStart = function()
    { t = $interval(function()
          { $scope.message = '現在時刻：' + (new Date()).toLocaleTimeString();
          }, 1000);
    }

時刻の表示を停止する onStop 関数です。

    $scope.onStop = function()
    { $interval.cancel(t);
    };

div で MyController を定義します。
{{message}} に現在時刻を表示します。
スタートボタンのクリックで、現在時刻の表示を開始します。
ストップボタンで時刻の更新を停止します。
<body ng-controller="MyController"> <div>{{message}}</div> <button ng-click="onStart()">スタート</button> <button ng-click="onStop()">ストップ</button> </body>
AngularJS を使用せずに、同じプログラムを作成してみました。
Time こちらの方が解りやすくて簡単かも知れません。

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)