Updating array after $http request not working - angularjs

Question

ng-repeat in md-sidenav
<md-list>
<md-list-item ng-repeat="it in cars">
{{ it.name }}
</md-list-item>
</mdlist>
Car Controller
self.refreshUI = function(select) {
carService.getAllCars()
.then(function (res) {
$scope.cars = carService.carsList;
console.log($scope.cars);
}, function (err) {
//error
})
};
// Load all registered cars
self.refreshUI(null);
Above code runs when controller is loaded (last line) and it's working fine. But when I create new car (cars are stored in mysql db) and I want to update $scope.cars array by self.refreshUI() function it will not work until refreshing page mannualy.
console.log($scope.cars) from refreshUI function returns correct result but console.log(angular.element($0).scope().cars) gives wrong array (without new cars)
Car Service
function carService($q, $http) {
var cars = this;
cars.carsList = {};
cars.getAllCars = function() {
var defer = $q.defer();
$http.get("http://car.app/getCars")
.success(function(res) {
cars.carsList = res;
defer.resolve(res);
})
.error(function(err, status){
defer.reject(err);
});
return defer.promise;
};
return cars;
}
Where could be the problem?
//edit: $rootScope is working fine but i still want to use $scope

Answer 1

Why aren't you using a returned Promise as a result from the $http call? Besides of a better code style, it could solve your problem. With that kind of service-controller infrastructure I never had 'binding problems' like that.
function carService($q, $http) {
var cars = this;
cars.carsList = {};
cars.getAllCars = function() {
return $http.get('http://car.app/getCars').then(function (response) {
cars.carsList = response.data;
return response.data;
});
};
return cars;
}
In your controller you could then do something like that:
self.refreshUI = function() {
carService.getAllCars()
.then(function (data) {
// just obtain the promise data
$scope.cars = data;
}, function (err) {
// error handling
});
};
self.refreshUI();