Dan Beaulieu Dan Beaulieu - 4 months ago 104
AngularJS Question

Is there a way to refresh virtual repeat container?

I've got a

that handles the data from an API call triggered by a search box. I'd like to be able to refresh this container when a user enters a second search query.

I'm using a setup similar to this plnkr which is from this question:. The only difference is its getting data from a server when the user enters a search term.

My Question

Is there a way to trigger a refresh an

I don't think the code is relevant but here's my (simplified) production code:

var self = this;
self.infiniteItems = {
numLoaded_: 0,
toLoad_: 0,
items: [],
getItemAtIndex: function (index) {
if (index > this.numLoaded_) {
return null;
return this.items[index];
getLength: function() {
return this.numLoaded_ + 25;
fetchMoreItems_: function (index) {
if (this.toLoad_ < index) {
this.toLoad_ += 5;
var offset = 0;

method: 'GET',
datatype: 'json',
url: '{my-api-call}',
contentType: "application/json; charset=utf-8",
cache: false,
params: {
param: query,
page: offset
}).then(angular.bind(this, function (obj) {
this.items = this.items.concat(obj.data.SearchResults);
this.numLoaded_ = this.toLoad_;
$scope.searchResults = obj.data.SearchResults;


I'm going to post my solution since there isn't an answer yet. If an better answer gets posted I'll gladly accept it.

First, I migrated all of my search result code into it's own template, directive and controller.

Next, I added an empty container in place of my logic. I'll use this as a place to dump my directive dynamically every time I search.

`<div id="search-result-container"></div>`

Finally, I dynamically appended my new directive like this

$scope.handleHotlineSearchClick = function () {           
    var query = $('#legal-search-input').val();

    if (query != "") {
        $scope.searchLoaded = false;

This way every time the user enters a new search term the directive gets reloaded.