onsen ui2 - master detail page with angularjs - onsen-ui2

Question

how can i create a master detail page with angularjs. I created a factory which calls the data from a json file then created a list controller to list the title for the list items but when i reach the view controller im getting an error. an example of the code is below
var cachedData;
function getData($scope, callback) {
$http.get('js/husbandry.json').success(function(data) { // call data from json file
$scope.items = data.items;
callback(data.items);
console.log(data);
}).error(function() {
ons.notification.alert({
message: 'Could not Connect to the Database.'
});
});
}
return {
list: getData,
find: function(data, callback) {
var hb = cachedData.filter(function(items) {
return items.title == data;
})[0];
callback(hb);
}
};
});
module.controller('ListCtrl', function($scope, HB) {
$scope.items = {
title: 'day 2'
}
HB.list($scope.items.title, function(items) {
$scope.items = items;
});
$scope.showDetail = function(title) {
$scope.navi.pushPage("day1.html", { animation: "fade", items: title });
}
});
module.controller('ViewCtrl', ['$scope', 'HB', function($scope, HB) {
var page = $scope.navi.topPage.data;
HB.find(page.options.data, function(hb) {
$scope.items = hb;
});
}]);