AngularJS model updates but view doesn't when using $cookieStore - angularjs

Question

I have a search 'page' in my AngularJS app which essentially consists of a view that holds the search form (and displays the results) and a controller which handles the search request. When the user types in a search query and hits 'Search', the $scope.submit() method is called and I can see the results properly. However, when the user clicks on a result and then goes back to the search page, it is blank. I thought of implementing a $cookieStore-based solution so that the query is stored in a cookie and whenever the user goes back to the search page, it automatically re-runs the previous search so they don't have to do it manually. Problem is, the model updates (search gets run from cookieStore value) but the view stays the same (blank). Here's a sample of my controller:
.controller('SearchCtrl', ['$scope', '$http', '$cookieStore','authService', function($scope, $http, $cookieStore, authService) {
var submitted = false;
$scope.submit = function(query){
$cookieStore.query = query;
submitted = true;
$http.jsonp(url).success(function(data) {
$scope.searchResults = data;
});
}
/*
Rerun query if user has pressed "back" or "home" button automatically:
*/
if(!submitted && $cookieStore.query){
console.log("submitting query from cookie store", $cookieStore.query);
$scope.submit($cookieStore.query);
}
... });
I tried using $scope.$apply() after the auto-search but still no joy. The view just won't update. Any hints you guys could give me? Cheers

Answer 1

You should place $scope.$apply at the end of your callback function. It's because $http makes an async AJAX call and by the time response comes back Angular is already done auto-$applying changes. So when you check the model you see the difference but since Angular is no longer $applying the difference cannot be seen on the view.
So when you add $scope.$apply you will have something like this:
.controller('SearchCtrl', ['$scope', '$http', '$cookieStore','authService', function($scope, $http, $cookieStore, authService) {
var submitted = false;
$scope.submit = function(query){
$cookieStore.query = query;
submitted = true;
$http.jsonp(url).success(function(data) {
$scope.searchResults = data;
$scope.$apply();
});
}
/*
Rerun query if user has pressed "back" or "home" button automatically:
*/
if(!submitted && $cookieStore.query){
console.log("submitting query from cookie store", $cookieStore.query);
$scope.submit($cookieStore.query);
}
... });