How do I hide the select2 dropdown in angular from within query handler?

Question

I have a select2 drop-down, called from ui-select2. I have a custom query function, which makes an ajax call.

Here's my problem. If the ajax call gets a 401 - e.g. the user session was timed out - then my app-wide handler intelligently reroutes the user to a login page (actually not a whole page, just a partial), but the drop-down controlled by select2 is still there, waiting for a callback.

Even if I send empty results with query.callback({results:[]}) the drop-down stays and shows "No results found".

How do I tell select2, "forget about this query request, just go away for now"?

Sample code:

query: function(q) {
  var s = q.term;
  User.query({name:s},function(users) {
    q.callback({results:users}); // THIS WORKS FINE
  }, function(res) {
    if (res.status === 401) {
      // WHAT DO I DO HERE?
      // to tell select2 "hide your drop-down, you are not relevant anymore
    }
  };
}

The problem is that if I don't tell it, even though the user is redirected (actually a partial) to login, the drop-down remains.

Answer 1

OK, I got it. Not very angular-ish, but it works for now:

if (res.status === 401) {
  q.element.select2("close");
}