<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>ASYNC Filter for AngularJS 1.x</h1>

    <p>
      Now that we have `async` in AngularJS 1.x, we no longer need Angular 2 :-)
    </p>

    <div ng-controller="Ctrl1">
        <h2>Should resolve after 2 seconds:</h2>
        {{p|async}}
        
        <h2>Should emit a new number every second:</h2>
        {{observable|async}}
    </div>

    <script src="http://code.angularjs.org/1.4.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.all.js"></script>
    <script src="script.js"></script>
  </body>

</html>
var myApp = angular.module('myApp', []);

myApp.controller('Ctrl1',  function($scope, $timeout) {
  $scope.p = $timeout(angular.identity, 2000).then(() => 'Resolved :)');
  $scope.observable = Rx.Observable.timer(1000, 1000).map(() => Math.random());
});


myApp.filter('async', function($rootScope) {
  var hash = new WeakMap();
  
  function asyncMe(value) {
    if (hash.get(value)) {
      return hash.get(value).result;
    }
    if (value.then && typeof value.then === 'function') {
      hash.set(value, {result: null});
      value.then(result => {
        hash.set(value, {result: result});
      });
      return null;
    }
    console.log(value.subscribe);
    if (value.subscribe && typeof value.subscribe === 'function') {
      hash.set(value, {result: null});
      value.subscribe(result => {
        $rootScope.$apply();
        hash.set(value, {result: result});
      })
      return null;
    }
    return value;
  };
  asyncMe.$stateful = true;
  return asyncMe;
});

/* Styles go here */