javascript - DOM isn't refreshing after modifying Angular $scope -

i have html5 offline web app utilizes angular. want build in 2 buttons. 1 should check updates, other should apply updates.

• if update ready, check updates button should not visible, apply updates button should be.
• if update not ready, check updates button should visible, apply updates button should not be.

i logic through navigation controller.

termapocketbookmodule.controller("navigationcontroller", ['$scope', '$rootscope', function ($scope, $rootscope) {      //check see if update available when application starts     if (window.applicationcache.status === window.applicationcache.updateready) {         $scope.applicationupdateready = true;     }     else {         $scope.applicationupdateready = false;     }      //add handler handle dom's updateready event.     window.applicationcache.addeventlistener('updateready', function () {         console.log("update ready.");         $scope.applicationupdateready = true;     });      //button handler apply update     $scope.applyupdate = function () {         console.log("apply update clicked.");         window.applicationcache.swapcache();         location.reload();     }      //button handler check update     $scope.checkforupdate = function () {         console.log("checking update.");         window.applicationcache.update();     } }]); 

that's wired in html:

<ul class="nav navbar-nav" ng-controller="navigationcontroller">     <li ng-if="applicationupdateready"><a ng-click="applyupdate()">update application</a></li>     <li ng-if="applicationupdateready != true"><a ng-click="checkforupdate()">check updates</a></li> </ul> 

here's ends happening:

1. i update app cache manifest on server.
2. i push check updates button in client. in js console see pull down updated resources , see log message "update ready".
3. at point, expect ui update , show apply updates button, not. check updates button still visible, click that.
4. the update application button appears. click that, , reloads site properly.

so in step 3 above, expect update application button appear due changing $scope.applicationupdateready. why not working , have press second time update application button appear?

two things here:

1. the nature of javascript primitives, , way angular handles them.
2. the need $scope.$apply on events outside of angular digest.

see below:

$scope.model = {}; $scope.model.applicationupdateready = false;  window.applicationcache.addeventlistener('updateready', function () {     console.log("update ready.");     $scope.model.applicationupdateready = true;     $scope.$apply(); });  <ul class="nav navbar-nav" ng-controller="navigationcontroller">     <li ng-if="model.applicationupdateready"><a ng-click="applyupdate()">update application</a></li>     <li ng-if="model.applicationupdateready != true"><a ng-click="checkforupdate()">check updates</a></li> </ul>