title: AngularJS : filter with AJAX
body: <p>I have been working on AngularJS project recently and came over an interesting problem while trying to create a filter which is using data loaded via AJAX request.</p>
  
  <p>First about the problem:</p>
  
  <p>AngularJS filter is a synchronous piece of code (function) that returns a string which is inserted into your DOM. And in most of the cases it works perfectly fine e.g. following filter that capitilizes first letter:</p>
  
  <pre><code>angular.module('myApp.filters', []).filter('capitilize', function() {
      return function (word) {
          return word.charAt(0).toUpperCase() + word.substr(1);
      }
  });
  </code></pre>
  
  <p>And this works great. Now the question is what if I can't return the desired result right away? Say I need to load some data via AJAX request to get the desired result. If I make an AJAX request my return statement will return an empty result before I get my data. So really the question is how do I notify filter to update itself when my data is loaded?</p>
  
  <p>Solution:</p>
  
  <p>It turned out that the solution was right there in front of me, but it took me some time to figure out how the magic is happening. Say I need a filter that retrieves artist's biography based on their name (yeah, a little bit crazy example but it proves the point):</p>
  
  <pre><code>angular.module('myApp.filters', []).filter('biography', function($q, $http) {
      var pending = {};
  
      return function (artist) {
          if ( !(artist in pending) ) {
              pending[artist] = null;
              $http.get('http://developer.echonest.com/api/v4/artist/biographies?api_key=FILDTEOIK2HBORODV&amp;name='
                  + artist + '&amp;format=json&amp;results=1&amp;start=0&amp;license=cc-by-sa')
                  .then(function(response){
                      pending[artist] = response.data.response.biographies[0].text;
              });
          }
  
          return pending[artist] || '';
      }
  });
  </code></pre>
  
  <p>It works, but how? I made a get request, got my result, but how does it force filter to update itself. The key here is the angular's $q (A promise/deferred implementation inspired by <a href="https://github.com/kriskowal/q" rel="nofollow">Kris Kowal's Q.</a>)</p>
  
  <p>from angular documentation:</p>
  
  <blockquote>
    <p>$q is integrated with the $rootScope.Scope Scope model observation mechanism in angular, which means faster propagation of resolution or rejection into your models and avoiding unnecessary browser repaints, which would result in flickering UI.</p>
  </blockquote>
  
  <p>This means that whenever the promise is resolved it causes the update, in fact here is the code from angular:</p>
  
  <pre><code>  function done(status, response, headersString, statusText) {
      if (cache) {
        if (isSuccess(status)) {
          cache.put(url, [status, response, parseHeaders(headersString), statusText]);
        } else {
          // remove promise from the cache
          cache.remove(url);
        }
      }
  
      resolvePromise(response, status, headersString, statusText);
      if (!$rootScope.$$phase) $rootScope.$apply();
    }
  </code></pre>
  
  <p>Hope this was helpful for you. Here is the example, keep in mind that the example is making cross domain ajax calls, you will need to disable cross domain policy of your browser:</p>
  
  <p><a href="http://jsfiddle.net/pJuZ9/8/" rel="nofollow">http://jsfiddle.net/pJuZ9/8/</a></p>
  
  <p>IMPORTANT: Keep in mind not to overwhelm filter with same ajax request, otherwise you might end up with this:</p>
  
  <pre><code>Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
  Watchers fired in the last 5 iterations: []
  </code></pre>