javascript - angularjs ng-show not working when first displaying page -

i have html in partials

<div class="alert alert-info" style="padding:50px" data-ng-show="!doneloading">loading page data .....</div> 

in controller, have javascript initialize 'doneloading'.

(function() { 'use strict';  function maincontroller($scope, $location, $anchorscroll) {     $scope.doneloading = false;     $scope.haspageloaderror = false;     $scope.pageloaderrormsg = "";      console.log("getting main");      $scope.scrollto = function(id) {         $location.hash(id);         //console.log($location.hash());         $anchorscroll();     };      $scope.doneloading = true; }  myapp.controller("maincontroller", maincontroller); 

})();

when first load page in browser, 'loading page data .....' displays. if navigate other partial , come original page, goes away expected.

why initial load not work properly?

are trying show "loading data" first display "done" once finishes?

you can try use $timeout in controller this:

function alertctrl($scope, $timeout) { $scope.loading = true; console.log("getting main"); $timeout(function() {     $scope.loading = false; },1000);}; 

then template looks this:

<div ng-controller="alertctrl" class="alert alert-info" style="padding:50px"> <span data-ng-show="loading">loading page data .....</span>  <span data-ng-show="!loading">done</span> 

make sure inject $timeout in controller.