Angular.jsでデータが更新されない

Angular.jsで、ユーザーがイベントを発生させるまでデータが更新されない状態が発生したので、調べたことをメモしておきます。

サンプルコード1

データが更新されなくなったサンプルです。

HTML

<div ng-controller="vaList">
	<button ng-click="click()">特に何も行わないクリックイベント</button>
	<ul class="va-list">
		<li class="va-list-item" ng-repeat="actor in actorData">
			<div class="va-list-item_name">{{actor.name}} <span class="va-list-item_belong">(所属:{{actor.belong}})</span></div>
			<div class="va-list-item_birthday">生年月日:{{actor.birthday}}</div>
		</li>
	</ul>
</div>

JavaScript

angular.module('app', []).controller('vaList', function($scope) {

	$scope.actorData = '';

	$scope.click = function() {}

	setTimeout(function() {
		$scope.actorData = [
			{
				"name": "安済 知佳",
				"kana_en": "anzai chika",
				"kana_jp": "あんざい ちか",
				"birthday": "非公開",
				"belong": "エイベックス・ピクチャーズ"
			}, {
				"name": "高橋 李依",
				"kana_en": "takahashi rie",
				"kana_jp": "たかはし りえ",
				"birthday": "1994.2.27",
				"belong": "81プロデュース"
			}
			～ 略 ～
			{
				"name": "早見 沙織",
				"kana_en": "hayami saori",
				"kana_jp": "はやみ さおり",
				"birthday": "1991.5.29",
				"belong": "アイムエンタープライズ"
			}
		];
	}, 1000);
});

一定時間後にデータを変更するためにsetTimeoutを使っていますが、実際はデータベースからデータを取得して変更しようとしたときに更新されませんでした。
クリックなどのイベントが発生するとデータが更新されました。
データが更新されないデモページ
　

サンプルコード2

$apply()を使うことで、データの更新ができました。

JavaScript

angular.module('app', []).controller('vaList', function($scope) {

	$scope.actorData = '';

	$scope.click = function() {}

	setTimeout(function() {
		$scope.$apply(function () {
			$scope.actorData = [
				{
					"name": "安済 知佳",
					"kana_en": "anzai chika",
					"kana_jp": "あんざい ちか",
					"birthday": "非公開",
					"belong": "エイベックス・ピクチャーズ"
				}, {
					"name": "高橋 李依",
					"kana_en": "takahashi rie",
					"kana_jp": "たかはし りえ",
					"birthday": "1994.2.27",
					"belong": "81プロデュース"
				}
				～ 略 ～
				{
					"name": "早見 沙織",
					"kana_en": "hayami saori",
					"kana_jp": "はやみ さおり",
					"birthday": "1991.5.29",
					"belong": "アイムエンタープライズ"
				}
			];
		});
	}, 1000);
});

対応後のデモページ
　

サンプルコード3

実際にsetTimeoutを使いたい場合、代わりに$timeout()を使うといいようです。

JavaScript

angular.module('app', []).controller('vaList', function($scope, $timeout) {

	$scope.actorData = '';

	$scope.click = function() {}

	$timeout(function() {
		$scope.actorData = [
			{
				"name": "安済 知佳",
				"kana_en": "anzai chika",
				"kana_jp": "あんざい ちか",
				"birthday": "非公開",
				"belong": "エイベックス・ピクチャーズ"
			}, {
				"name": "高橋 李依",
				"kana_en": "takahashi rie",
				"kana_jp": "たかはし りえ",
				"birthday": "1994.2.27",
				"belong": "81プロデュース"
			}
			～ 略 ～
			{
				"name": "早見 沙織",
				"kana_en": "hayami saori",
				"kana_jp": "はやみ さおり",
				"birthday": "1991.5.29",
				"belong": "アイムエンタープライズ"
			}
		];
	}, 1000);
});

対応後のデモページ2
　

【参考サイト】

• AngularJS のデータバインドを支える $apply – AngularJS Ninja Blog