Angular callback function

<!DOCTYPE html>
<html lang="en" ng-app="TestApp">

  <head>
    <meta charset="utf-8" />
    <title>Angular REST Test</title>
    <link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.3/angular-resource.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div>
      <strong>problem</strong><br />
      How to execute the "emptyList" function <br/>
      and trigger the loadFunction when it's finished ?<br/>
      <a href="http://stackoverflow.com/questions/20257212/how-to-use-angularjs-promise" target="_blank">-> stackoverflow.com</a>
    </div>
    
    <div class="container" ng-controller="TestCtrl">
      <table class="table table-bordered">
        <tr ng-repeat="obj in objs"><td><strong>{{obj.name}}</strong></td><td>{{obj.completed}}</td></tr>
        </div>
      </div>
    </div>
  </body>
</html>

'use strict';

angular.module('TestApp', ['TestApp.services', 'TestApp.controllers']);

angular.module('TestApp.services', ['ngResource']).
  factory('Obj', function($resource){
		return $resource('datas.json');
	});

angular.module('TestApp.controllers', []).
	controller('TestCtrl', ['$scope', '$interval', 'Obj', function($scope, $interval, Obj) {

  var loadList = function() {
    Obj.query(function(obj){
      $scope.objs = [];
      $interval(function() {$scope.objs.push(obj.shift())}, 200, obj.length);
    });
  }
  
  var cleanList = function() {
    var delay = 200; 
    var n = $scope.objs.length;
    
		if (n!==0) {
			$interval(function() {$scope.objs.shift()}, delay, n);
		}
		
		$interval(function() { loadList() }, delay*n, 1);
	}

  loadList();
	$interval(cleanList, 7000);
	
}]);

[
  { "name": "one", "completed": true }, 
  { "name": "two", "completed": false },
  { "name": "three", "completed": true }, 
  { "name": "four", "completed": false }, 
  { "name": "five", "completed": true }, 
  { "name": "six", "completed": false },
  { "name": "seven", "completed": true }, 
  { "name": "eight", "completed": false }
]

body {
  margin: 20px 0 0 20px;
}  
div {
  margin: 0 20px 20px 0;
  padding:20px;
  background-color: #e8e8e8;
  float: left;
} 
.table {
  table-layout: fixed;
  background-color:white;
}

**problem**  
How to execute the emptyList function and trigger the loadFunction when it's finished ?

[-> question on stackoverflow](http://stackoverflow.com/questions/20257212/how-to-use-angularjs-promise "stackoverflow question")