How to update my angular scope **Updated** - angularjs

Question

I am using a service with an async call.
The service looks like that;
var routesApp = angular.module('routesApp', []);
routesApp.factory('angRoutes', function($http) {
var angRoutes = {
async: function(id) {
var data = $.param({
query: id
});
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
var promise = $http.post('../ajax-php.php', data, config)
.success(function (data, status, headers, config) {
return data;
console.log(data);
})
.error(function (data, status, header, config) {
});
return promise;
}
};
return angRoutes;
});
When the page first load I use one controller to fill the scope;
routesApp.controller('topRoutesCtrl', function topRoutesCtrl($scope,$http, angRoutes) {
angRoutes.async('top').then(function(data) {
$scope.angRoutes = data;
console.log(data);
});
});
This is all working great. But then I use another controller for when the user click on something.
routesApp.controller('navRoutesCtrl', function navRoutesCtrl($scope,$http, angRoutes) {
$scope.update = function(id) {
angRoutes.async(id).then(function(data) {
$scope.angRoutes = data;
console.log(data);
});
}
I am able to see the data I am getting in the console and the id does get passed in the update function and the data is corect but it seams that my scope is not getting updated. it remains the value that was first sent when the page load.
How do I update my scope?
UPDATE
as seen here
In my angular HTML I do a ng-repeat like this
<div ng-controller="topRoutesCtrl" class="ajax">
<div id="ajaxLoader"> <img class="loadingGif" src =" /images/ajax-loader.gif"> </div>
<div data-ng-repeat="r in angRoutes.data" class="routes-block" >
{{r.name}}
</div>
</div>
Now in my angular JS if I do
routesApp.controller('topRoutesCtrl', function topRoutesCtrl($scope,$http, angRoutes) {
angRoutes.async('top').then(function(data) {
$scope.angRoutes = data;
console.log(angRoutes);
});
});
Note that in the console I can see the same thing if I console.log(data) or console.log(angRoutes) My app however will only work if I do $scope.angRoutes = data; and nothing gets displayed if I do $scope.angRoutes = angRoutes;
So maybe I am using the referencve the wrong way in my ng-repeat

Answer 1

you can use wrapper $timeout for manual start $digest cicle
$scope.update = function(id) {
angRoutes.async(id).then(function(data) {
$timeout(function() {
$scope.angRoutes = data;
}
console.log(data);
});
}
but keep in mind that $digest cicle are triggerd automaticly after $http calls and written behavior is strange