title: Onsen-UI: how to update the ons-screen page attribute and reload the view?
body: <p>I've just started using Onsen UI by implementing the <a href="http://onsenui.io/guide/bootstrap.html" rel="nofollow">bootstrap example</a> and I've been trying to get the view to update when I change the page attribute.</p>
  
  <pre><code>&lt;body ng-controller="PageLoadingCtrl"&gt;
  &lt;ons-screen page="{{loadedPage}}"&gt;&lt;/ons-screen&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My controller's code:</p>
  
  <pre><code>app.controller('PageLoadingCtrl', ['$scope', '$timeout', 'notificationService',
      function($scope, $timeout, sharedService){
          $scope.loadedPage = "index.html";
          $scope.updatePage =  function(page){
              $timeout( function (){
                  $scope.loadedPage = page;
                  $scope.$apply();
              }, 500);
          };
          $scope.$on('changePage', function (event, message){
              $scope.updatePage(message);
          });
      }
  ]);
  </code></pre>
  
  <p>As you can see I'm using a controller on the body object so that I can update the loadedPage variable however, when I fire the changePage event, the view doesn't change.
  After checking the DOM elements with web inspector I can see that page attribute is equal to whatever I pass to the updatePage function.</p>
  
  <p>So far I tried to force a refresh with $apply and $digest but that still doesn't do the trick.</p>
  
  <p>Cheers!</p>