How do I refresh my ng-repeat?

Question

I have a controller (called "catalogueController") that manages my search box and my search page. I have the controller initially set the page to automatically call the search function defined in "catalogueController" when the app loads to pre-load my array of items (called Inventory) to be repeated via ng-repeat in the page.

The process runs like this:
1. I submit the search form.
2. "catalogueController" will send the search term to my factory (called "Search").
3. "Search" will have a function which will make a server call to query my database for that particular search.
4. The database will send the results of the search to the "Search" factory.
5. The "Search" factory will send the results to the "catalogueController" controller.
6. "catalogueController" will update the $scope.Inventory to be equal to the new result that I was received.

My problem is that ng-repeat does not refresh itself to display my new and updated $scope.Inventory array. $scope.Inventory definitely is updated (I have made sure of this through various console logs).

I have also tried to use $scope.$apply(). It did not work for me.

Thank you in advance for your help!

Here is my code:

HTML Template

<form role="search" class="navbar-form navbar-left" ng-controller="catalogueController" ng-submit="search(search_term)">
    <div class="form-group">
        <input type="text" placeholder="Search" class="form-control" ng-model="search_term">
    </div>
    <button type="submit" class="btn btn-default">Search</button>
</form>
<main ng-view></main>

catalogue.html partial

<div id="main" class="margin-top-50 clearfix container">
<div ng-repeat="items in inventory" class="row-fluid">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail"><img src="image.jpg" alt="..." class="col-md-12">
            <div class="caption">
                <h3>{{ items.itemName }}</h3>
                <p>{{ items.description }}</p>
                <p><a href="#" role="button" class="btn btn-primary">Buy <a href="#" role="button" class="btn btn-default">More Info</a></a></p>
            </div>
        </div>
    </div>
</div>

"app.js" Angular App

var myApp = angular.module('qcbApp', ['ngRoute', 'ngCookies', 'appControllers']);

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/login', {
            templateUrl: 'html/partials/login.html',
            controller: 'registrationController'
        }).
        when('/sign-up', {
            templateUrl: 'html/partials/sign-up.html',
            controller: 'registrationController'
        }).
        when('/catalogue', {
            templateUrl: 'html/partials/catalogue.html',
            controller: 'catalogueController'
        }).
        when('/', {
            templateUrl: 'html/partials/qcbhome.html'
        }).
        otherwise({
            redirectTo: '/'
        });
    }]);

"catalogueController" Controller

myApp.controller('catalogueController', ['$scope', 'Search', function($scope, Search) {

var time = 0;

var searchCatalogue = function(search) {
    $scope.inventory = null;
    console.log("Controller -- "+search);
    Search.searchCatalogue(search)
    .then(function(results) {
        console.log(results);
        $scope.inventory = results;
    });
};

if(time == 0)
{
    searchCatalogue('');
    time++;
}
$scope.search = function(term) {
    searchCatalogue(term);   
}
}]);

"Search" Factory

myApp.factory('Search', ['$http', '$q', function($http, $q) {

function searchCatalogue(term) {
    var deferred = $q.defer();

    console.log("Factory -- "+term);

    $http.post('/catalogue_data', {term: term}, {headers: {'Content-Type': 'application/json'}})
    .success(function(result) {
        console.log(result[0].SKU);
        deferred.resolve(result);
        console.log("Factory results -- "+result);
    });

    return deferred.promise;
}

return {
    searchCatalogue: searchCatalogue
}; //return
}]);

Answer 1

I've seen the situation a few times where when you are updating a property directly on the $scope object there are interesting problems around databinding to that value (such as inventory). However if you databind to an object property of an object then the databinding works as expected. So for example use a property on $scope. I believe this is a copy by value vs copy by reference issue.

Update all your inventory references as follows $scope.data.inventory = result;

Also don't forget to update your inventory reference in the html template:

<div ng-repeat="items in data.inventory" class="row-fluid">

Update: I made this plunk to figure it out - http://plnkr.co/edit/0ZLagR?p=preview

I think the primary problem is you have the controller specified twice. I removed it from the form and it started working.

Answer 2

I think the problem is the ng-repeat can not access the inventory in scope. You have to create a div which contains both the form and the ng-repeat.

The html should be:

<div ng-controller="catalogueController">
   <!-- Move the controller from the form to parent div -->
   <form role="search" class="navbar-form navbar-left" ng-submit="search(search_term)">
<div class="form-group">
    <input type="text" placeholder="Search" class="form-control" ng-model="search_term">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>

 <div id="main" class="margin-top-50 clearfix container">
  <div ng-repeat="items in inventory" class="row-fluid">
   <div class="col-sm-6 col-md-3">
    <div class="thumbnail"><img src="image.jpg" alt="..." class="col-md-12">
        <div class="caption">
            <h3>{{ items.itemName }}</h3>
            <p>{{ items.description }}</p>
            <p><a href="#" role="button" class="btn btn-primary">Buy <a href="#" role="button" class="btn btn-default">More Info</a></a></p>
        </div>
    </div>
  </div>
 </div>
</div>