Angular not dynamically updating deferred HTML - angularjs

Question

I'm trying to build a dynamic site using Angular. I'm trying to simulate delays in loading HTML by using setTimeout with $q.defer. It works if I don't have the timeout, but as soon as I add the timeout the data isn't loaded. It does get populated if I click between different views, so I know it's executing. But Angular doesn't seem to be aware that it's finally available.
I've got an HTML file, with the following:
<div ng-controller="MyCtrl">
<div id='my-content' ng-view></div>
<div id='footer'>
footer here
View 1 View 2
</div>
</div>
Here's view1.html:
<div ng-include="'teasers.html'"></div>
Here's teasers.html:
<div class='column content' ng-repeat="teaser in data.teasers">
<div class='button type-overlay' ng-class="{{ 'button-' + ($index + 1) }}">
<div class='teaser-text'>
<img class='button-background' ng-src='{{ teaser.img_src }}'>
<span class='teaser-text'>{{ teaser.name }}</span>
</div>
</div>
</div>
Here's my app.js:
var app = angular.module('app', [], function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix("!");
$routeProvider.when('/', {
templateUrl: 'view1.html'
});
$routeProvider.when('/view2', {
templateUrl: 'view2.html'
});
});
app.factory('data', function($http, $q) {
return {
fetchTeasers: function () {
var deferred = $q.defer();
setTimeout(function() {
deferred.resolve([
{
"name": "Teaser 1",
"img_src": "SRC"
},
{
"name": "Teaser 2",
"img_src": "SRC"
},
{
"name": "Teaser 3",
"img_src": "SRC"
},
{
"name": "Teaser 4",
"img_src": "SRC"
}
]);
}, 5000);
return deferred.promise;
}
}
});
And here's the controller.js:
function MyCtrl($scope, data) {
$scope.data = {};
$scope.data.teasers = data.fetchTeasers();
}
What do I need to do to get deferred working in Angular?

Answer 1

Instead of window.setTimeout use angular timeout method: $timeout. Be sure to load it via DI.
$timeout(function(){
// all your magic goes here
});
By the way, you could use setTimeout, but then you would need do call $scope.$apply() manually. In fact this is what angular does internally.
$scope.$apply(function(){ // all your magic goes here })
But again, as I said, just use $timeout.
PS. The reason view gets updated after user interaction is the fact that it invokes dirty checking, unfortunately a little bit too late in this case. Using $apply or $timeout will ensure that angular gets notified about the changes when needed.
PPS. Although I've posted an answer to this particular problem, I should mention that you in this case you could use $resource, which is a angular service supporting RESTful APIs with promises. It uses an implementation of deferreds based on $q as well. There's no need to reinvent the wheel, unless you have any good reasons for it.