onsen ui2 - master detail page with angularjs

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;
    });
}]);