現在、angularJSとonsenUIを用いて、開発中です。

onsenUIのons-lazy-repeatを使ってみたのですが、上手く動きません。
maincontrollerに適当なメソッドを追加してよぶことはできているので、コントローラーとの接続ミスではないと思うのですが、色々いじっても動かず途方にくれています。

どこが問題なのか指摘していただけるとありがたいです。

index.html

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="js/xdate.js"></script>
<script src="js/maincontroller.js"></script>
<script src="js/dataservice.js"></script>




<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/accodinon.css">

 <script>


    var app=angular.module('myApp', ['onsen','mainControllers']);





</script>
</head>
<body>

<ons-navigator page="lazy_list_page.html">


</ons-navigator> 
</body>
</html>

maincontroller.js

var mainControllers=angular.module('mainControllers',[]);

//メインコントローラー        
mainControllers.controller('MainController',['$scope','DataService',
function($scope,DataService){



$scope.MyDelegate = {
countItems: function() {
  // Return number of items.
  return 1000000;
},

calculateItemHeight: function(index) {
  // Return the height of an item in pixels.
  return 45;
},

configureItemScope: function(index, itemScope) {
  // Initialize scope
  itemScope.item = 'Item #' + (index + 1);
  itemScope.hoge = 'Hoge #' + (index + 1);
},

destroyItemScope: function(index, itemScope) {
  // Optional method that is called when an item is unloaded.
  console.log('Destroyed item with index: ' + index);
}
};
}
}]);

lazy_list_page.html

<ons-list ng-controller="MainController">
<ons-list-item ons-lazy-repeat="MyDelegate"`>
{{ item }}
{{ hoge }}
</ons-list-item>
</ons-list>