Recently, I began using Onsen UI by incorporating the bootstrap example. I've encountered an issue where the view does not update when I modify the page attribute.
<body ng-controller="PageLoadingCtrl">
<ons-screen page="{{loadedPage}}"></ons-screen>
</body>
Below is my controller's 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);
});
}
]);
While utilizing a controller on the body object to update the loadedPage variable, the view fails to change upon firing the changePage event. Upon inspecting DOM elements with a web inspector, it appears that the page attribute reflects what I provide to the updatePage function.
Thus far, I have attempted to trigger a refresh with $apply and $digest, but these methods have proven ineffective in resolving the issue.
Cheers!