Angularjs Behaving Strangely When There's A Nested Relationship Of Promises In Services

I have 2 plunkr's ready to demonstrate what I'm confused about. I am seeking a clear explanation as to precisely why the first plunkr fails, yet the second works. In this first plu

Solution 1:

Your hunch is right. When you use setTimeout, it triggers an event Angular knows nothing about; that's not the case if you use $timeout instead. So, for your first Plunker script to work, you need to start a digest cycle manually by calling $rootScope.$apply():

angular.module('testApi', []).factory('testApi', function($q, $rootScope) {
...    
    setTimeout(function() { 
        $rootScope.$apply(function() { 
            deferred.resolve({user: { id: '1', name: 'bozo'}}); 
        });
    }, 1000);

Plunker here.

You won't need to do any of the above if you stick with $timeout, and I suggest that you do that.

This SO question has more info on why promises callbacks are only called upon entering a $digest cycle.