Why is this simple AngularJS ng-show not working?

Question

I cannot figure out why my simple AngularJS app not working as intended. \"Loading...\" is supposed to be hidden, and \"Done!\" should be shown after 1 second.

html:

Answer 1

I think the biggest problem here is that you are using a primitive as your model. The angular team recommends to use an object to tie your model to. For example:

scope.model = {};
scope.model.loading = false;

Then in your html:

<div class="text-center" ng-show="model.loading">

That way angular gets a reference to a field inside an object instead of a primitive being pointed to by a variable.