title: reload page after 3 seconds using Angular
body: <p>The following is the controller of a page we are developing.</p>
  
  <pre><code>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();
          }
  
      } ]);
  </code></pre>
  
  <p>Here, we are trying to reload the page with this:</p>
  
  <pre><code>$timeout(reloadPage, 3000);
  
          var reloadPage = function() {
              $route.reload();
          }
  </code></pre>
  
  <p>It can clearly be seen that the way we handle page reload is wrong. How can it be correctly implemented?</p>