AngularJS Chaining Promises won't bind to template - angularjs

Question

I can't seem to figure to figure out why after using promises it still isn't waiting and so $scope.return_message is returning null.
function getRandomCommit()
{
var d = $q.defer();
$scope.repos = Repos.query({username: 'octocat'}).$promise.then(function ( value )
{
var ranNum = Math.floor((Math.random()*value.length) + 1);
$scope.repo = Repo.get({username: 'octocat'}, {repo: value[ranNum].name}).$promise.then(function ( value2 )
{
$scope.commits = Commit.query({username: 'octocat'}, {repo: value2.name}).$promise.then(function ( value3 )
{
var ranNum2 = Math.floor((Math.random()*value3.length));
d.resolve(value3[ranNum2].commit.message);
return d.promise;
});
});
});
};
$scope.return_message = getRandomCommit();`

Answer 1

AngularJS 1.1.x and 1.0.x contained somewhat experimental feature called unwrapping promises. You could pass a promise to the template and once it got resolved, the template would automatically use the resolved value instead of the promise object itself.
Pretty cool, huh? It may sound like a nice feature but in fact it wasn't that useful after all. It added too much logic to AngularJS, slowed down evaluation and made code in templates/controllers unclear. AngularJS crew member commented on GitHub:
This is a feature that didn't prove to be wildly useful or popular,
primarily because of the dichotomy between data access in templates
(accessed as raw values) and controller code (accessed as promises).
In most code we ended up resolving promises manually in controllers
or automatically via routing and unifying the model access in this way.
Therefore it was deprecated in AngularJS 1.2.x.
Your options now are:
wait for the promise to resolve and set the variable on $scope
force enabling unwrapping promises (deprecated in 1.2 and removed in 1.3 so it's not really an option anymore!)
To make your code work refactor getRandomCommit to return a promise:
function getRandomCommit () {
var d = $q.defer();
// your code ...
return d.promise;
}
and change what $scope.return_message is:
getRandomCommit().then(resolved_value => {
$scope.return_message = resolved_value;
});
If you're using AngularJS 1.2 you can still use promises unwrapping but note it's deprecated and removed in version 1.3. You can find more information in the AngularJS 1.0->1.2 migration guide.
Edit (2014-10-30):
Recently AngularJS 1.3 was released. In this branch promises unwrapping is removed completely.

Answer 2

Change your code to
function getRandomCommit() {
var d = $q.defer();
// do async tasks
// call d.resolve(data) when finish
return d.promise;
}
getRandomCommit().then(function (data) {
$scope.return_message = data;
});

Answer 3

I no longer have an error in my console and bangarang can see the proper $scope.return_message thanks #miszy
function getRandomCommit()
{
var d = $q.defer();
$scope.repos = Repos.query({username: 'octocat'}).$promise.then(function ( value )
{
var ranNum = Math.floor((Math.random()*value.length) + 1);
$scope.repo = Repo.get({username: 'octocat'}, {repo: value[ranNum].name}).$promise.then(function ( value2 )
{
$scope.commits = Commit.query({username: 'octocat'}, {repo: value2.name}).$promise.then(function ( value3 )
{
var ranNum2 = Math.floor((Math.random()*value3.length));
d.resolve(value3[ranNum2].commit.message);
return d.promise;
});
});
});
}; });
});
});
return d.promise;
};
getRandomCommit().then(function( resolved_value ) {
$scope.return_message = resolved_value;
});
}]);