What is the correct way to use scope in this case?

Question

Angular

The database has a collection of objects. The page has navigation through the categories of these objects. Using navigation changes the collection in the controller. I also searched for another field using the search string, but when the collection is changed in the controller, there are no changes to the UI. The data from the database arrives correctly and the $scope.carsList array itself changes. I tried to put $scope.$apply(), it didn't help, only errors flew to the console. I will be grateful for help.

angular.module('app', [])
    .factory('carRepository', function ($http) {
        return {
            getCarsForNav: function (callbackSuccess) {
                $http.get('/api/GetNav').success(callbackSuccess);
            },
            getCarsByBrand: function (brand, callbackSuccess) {
                $http.get('/api/GetByBrand/' + brand).success(callbackSuccess);
            },
            getCarsByCategory: function (category, callbackSuccess) {
                $http.get('/api/GetCarsByCategory/' + category).success(callbackSuccess);
            }
        }
    })
 .controller('ShowController', function ($scope, $http, carRepository) {
        $scope.chooseBrand = function (brand) {
            carRepository.getCarsByBrand(brand, function (result) {
                $scope.carsList = result;
            });
        };
        $scope.chooseBrand('All');

        $scope.find = function (category) {
            carRepository.getCarsByCategory(category, function (result) {
                $scope.carsList = result;
            })
        };
    })

Answer 1

in general, this entry
from the service looks very strange, it seems to me that you need to return a promise and process it,
try to do this (a little personal practice)

recovery: function(model){
        var request = $http.put(recoveryUrl.uriRecovery, {Email: model.Email, CaptchaHash: model.captchaHash, CaptchaValue: model.captchaValue});
        return request.then(function(success) {
          return success;
        }, function(error) {
          return error;
        })
      }

$scope.recovery = function () {
      recovery.recovery($scope.model).then(
        function (response) {
          if (typeof response.status === "number") {
            if (response.status === 200) {
              $scope.recoverySuccess = localizedMessages.get("user.register.success");
            } else {
              if (typeof response.data === "object"){
                if (typeof response.data.errorCode === "number") {
                  if (response.data.errorCode !== 0) {
                    recoveryError = response.data;

in the service, a request to the server is initiated, the data is returned to the controller by means of a deferred object (promise), in the controller I make a resolve and extract the data from it
in your case, almost the same thing happens, only you wrap it all in the success helper function, which resolves the "successful" promise.
I here thought, and maybe you should declare $scope.carsList before it will be assigned a value???
use a closure?

Answer 2

Why callback if $http returns promises, remake them, and look further