angular-async-filter

In TodoMVC examples all data may be local, but in real applications data is often fetched async from a remote. Before Angular 1.3, Angular implicitly unwrapped any promise in the scope to its resolved value. But in 1.3, it was removed. In Angular 2, you can explicitly await an async value with the async pipe. That way you can bind promises to your controller and only show the value in the view. This works pretty well because Angular's $q promises are integrated with the $digest loops, which means the view will be updated when a promise is resolved.

To implement this in Angular 1 without triggering an infinite $digest loop a WeakMap of promises is kept by the filter. WeakMaps are supported in all modern browsers. If you're targeting older browsers, you can include a WeakMap Polyfill.

Supports browserify/webpack.

Example

angular.module('myApp', ['async'])
  .controller('TestController', function ($http) {
    this.products = $http.get('/api/products').then(response => response.data)
  })

<ul ng-controller="TestController as ctrl">
  <li ng-repeat="product in ctrl.products | async">
    {{product.name}}, {{product.price}}€
  </li>
</ul>

Benefits

• You don't have to add a .then handler that assigns the value to the controller
• You can access (and await) the promise in your controller methods without storing it in addition to the value

States

pending	undefined
fulfilled	resolved value
rejected	undefined