Display not updating from scope in Angular?

Question

Angular

Hello. I recently started learning Angular and writing a small application. Faced a small problem.
I have a page that displays a list of elements, this list is formed depending on the selected filter (that is, they select the name of the city from the link and receive data from the server through the request). The controllers and markup code is shown below:

<section id="showcase" ng-show="catalogShow == true">
    <div class="container fadeOut">
        <div class="row wow fadeInDown" data-wow-duration="500ms">
            <div class="col-lg-12">
                <!-- section title -->
                <div class="title text-center">
                    <h2>Каталог <span class="color"></span></h2>
                    <div class="border"></div>
                </div>
                <!-- /section title -->
                <!-- portfolio item filtering -->
                <div class="portfolio-filter clearfix" ng-controller="Filter">
                    <ul class="text-center">
                        <li><a href="javascript:void(0)" ng-click="filterByCategory(-1)" class="filter" data-val="-1" data-filter="all">Все</a></li>
                        <li><a href="javascript:void(0)" ng-click="filterByCategory(1)" class="filter" data-val="1" data-filter=".march8">8 Марта</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-val="15" data-filter=".happyBirtday">День Рождение</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-val="48" data-filter=".romance">Романтика</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-va="14" data-filter=".rose">Розы</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-val="" data-filter=".toys">Игрушки</a></li>
                    </ul>
                </div>
                <!-- /portfolio item filtering -->
            </div> <!-- /end col-lg-12 -->
        </div> <!-- end row -->
    </div>	<!-- end container -->
    <!-- portfolio items -->
    <div class="portfolio-item-wrapper wow fadeInUp" data-wow-duration="500ms">
        <ul id="og-grid" class="og-grid">
            <!-- single portfolio item -->
            <li class="mix app fadeInUp flowerItem" data-wow-duration="500ms" ng-repeat="item in catalogItems">
                <a href="javascript:void(0)" data-largesrc="http://staging.test.ru{{item.MainImageUrl}}" data-title="{{item.Name}}" data-description="{{item.Name}}">
                    <img ng-src="http://staging.test.ru{{item.MainImageUrl}}" alt="{{item.Name}}" class="size-300x250">
                    <div class="hover-mask">
                        <h3>{{item.Name}}</h3>
                        <span>
                            <i class="fa fa-plus fa-2x"></i>
                        </span>
                    </div>
                </a>
            </li>
        </ul> <!-- end og grid -->
    </div>  <!-- portfolio items wrapper -->
</section>   <!-- End section -->

AngularJS

flApp.controller('Filter', function ($scope, $http) {
    $scope.catalogItems = [];
    
    $scope.filterByCity = function (cityId) {
        $scope.catalogShow = true;
        $scope.selectedCity = cityId;
        var urlString = 'http://staging.test.ru/RegionId=' + cityId;

        $http({
            url: urlString,
            headers: { " },
            method: 'GET'
        }).success(function (data, status, headers, config) {
            $scope.catalogItems = data.Items;
        });
    };
    
    $scope.filterByCategory = function (categoryId) {
        var urlString = 'http://staging.test.ru/partnerRegionId=' + $scope.selectedCity;
        $http({
            url: urlString,
            headers: { * },
            method: 'GET'
        }).success(function (data, status, headers, config) {
            $scope.catalogItems = data.Items[0];
        });
    };
});

Urls are test. When filterByCity fires, the display is updated, when filterByCategory fires, the display does not fire (although the function is executed). Which means I'm doing it wrong. I would like to get an answer what is wrong, and why? Thanks in advance to everyone who has read this question.

Answer 1

Are you sure the server will return 200?

Answer 2

$scope.catalogItems = data.Items[0];
I'm really confused by this design ... the console definitely doesn't swear at anything?

Answer 3

Does the array end up in the directory or not?
$scope.catalogItems = [data.Items[0]];

Answer 4

Firstly, from the above code I see that you <h3>{{item.Name}}</h3>have it outside the controller. perhaps you have another, external controller
if everything is OK with the controllers, then try to do it $scope.$apply()after updating the data, but this is a dirtyhack. Nedvano came across SefeApply https://coderwall.com/p/ngisma/safe-apply-in-angular-js