When using angular turns out that it’s not as straightforward when it comes to foreign libraries.
I needed to use jQuery $.post instead of angulars $http.post method (to reduce the friction between angular and asp.net mvc regarding request token validation) and I came across unexpected (though understandable once you get to the core problem) behavior. Here’s the angular version:
and the jquery code fragment:
Not much of a difference besides function names…. but turns out the template sees the changes in the original (angular) version, but not the jquery version. Why? well… behind the scenes, angular promises call a very important (as it turns out) function:
This – as the name suggests – applies the changes on the $scope object so that the template can see them.
To resolve my primary issues I had two options.
- call $scope.$apply() manually in the .always() callback
- wrap the jquery promise in an angular promise using $q.when($.post(…))
I chose the latter one – who knows what else the angular promises do or what they will do in the future.