<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.angularjs.org/1.3.15/angular.js"></script>
    
    <script src="script.js"></script>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body ng-app="myApp" ng-controller="MyController">
    
    <h1>AngularJS Service with promises and notification</h1>

    <h4>
        Complete: 
        <span ng-class="complete ? 'done' : 'not-done'">
          {{complete}}
        </span>
    </h4>
    
    <div ng-repeat="item in items">
        <div>{{item.name}}: {{item.role}}</div>
    </div>

      
  </body>

</html>
// Code goes here

var app = angular.module("myApp", []);

app.controller('MyController', ['$scope','myService', function($scope, myService) {
  
  $scope.items = [];
  $scope.complete = false;
  
  //this is all you have to do to call a service...
  myService.requestData().then(
    function success() {
      $scope.complete = true;
    },
    function failure() {
      
    },
    function notify(item){
      $scope.items.push(item);
    }
  );
    
}]);


//quick mock of what the real operationService does.  what's in here does not even matter.
app.factory("myService", ['$q','$interval',function ($q, $interval) {

  var data = [
    {name: "Superman", role: "hero", superpower:"fly", weakness:"Kryptonite"},
    {name: "Darth Vador", role: "villain", superpower:"the force", weakness:"kids"},
    {name: "Spiderman", role: "hero", superpower:"spider like", weakness:"girls"},
    {name: "Ursula", role: "villain", superpower:"magic", weakness:"she's ugly"},
  ];

  return { 
    requestData: function() {
      
      var i = 0,
          deferred = $q.defer();

      $interval(function () {
          deferred.notify(data[i]);
          i++;
      }, 500, data.length).then(
          function () {
              deferred.resolve('finished');
          }
      );

      return deferred.promise;
      
    }
  };

}]);
.done{
  color:green;
}

.not-done{
  color:red;
}