reload page after 3 seconds using Angular

Question

The following is the controller of a page we are developing.

rp3.controller('c1Ctrl', [
    '$scope',
    'xFactory',
    '$timeout',
    '$route',
    function($scope, xFactory, $interval, $timeout, $route) {

        var layout_url = "json/dashboard/layout/mpu/layout.json";

        xFactory.getJSON(layout_url, function(layout) { // read
            // layout's
            // web
            // service
            $.each(layout, function(i, val) {
                chart.push({
                    "v" : val,
                    "x" : xFactory
                });
                // alert(chart[0]);
                var cType = getChartType(val.chartType);
                // alert(cType);
                drawLayout(parentDIV.name, val.position, val.width,
                        val.height, val.title, val.color, val.bgcolor,
                        buttomCtrl.withCtrl, cType);

                    fillLayoutData(xFactory, val.position, val.url,
                            val.height, cType);
            });
        }, function() {
            console.log("Connection! ");

        });

        $timeout(reloadPage, 3000);

        var reloadPage = function() {
            $route.reload();
        }

    } ]);

Here, we are trying to reload the page with this:

$timeout(reloadPage, 3000);

        var reloadPage = function() {
            $route.reload();
        }

It can clearly be seen that the way we handle page reload is wrong. How can it be correctly implemented?

Answer 1

You define reloadPage after using it. Switch the lines:

var reloadPage = function() {
  $route.reload();
}

$timeout(reloadPage, 3000);

Or simpler:

$timeout($route.reload, 3000);