Question: I have tried the following, but am still getting a flicker when using ng-show: [Angularjs - ng-cloak/ng-show elements blink](https://stackoverflow.com/questions/11249768/angularjs-ng-cloak-ng-show-elements-blink)

I am using a template to load my top nav as follows:

```
<div data-ng-controller="userInfoCtrl">
   <a href="#!home">Home</a>
<a href="#!add-item">Add Item</a>
<a href="#!settings" data-ng-show="display">Settings</a>

```

Here is my controller:

```
   // User Info
appControllers.controller('userInfoCtrl', ['$scope', 'appAdminCheck', function ($scope, appAdminCheck) {

    // Set value for using ng-show/ng-hide
    appAdminCheck().then(function (isAdmin) {
        if (isAdmin == true) {
            $scope.display = true;
        }
    });
}]);

```

Answer: 
try this,

use `ng-class` with `style='visibility: hidden'`,

```
<a href="#!settings" style="visibility: hidden" ng-class='{forceShow: display}'>Settings</a>

```

`style="visibility: hidden"` hides the `<a>` initially then, when `display` comes to `true` class `forceShow` will add to the `<a>` by `ng-class`, 

and force `visibility: visible` when `$scope.display == true`,

```
<style>
    .forceShow {
      visibility: visible !important;
    }
</style>

```

here is the [Demo Plunker](http://plnkr.co/edit/0bpvC57NPi131noiXZQi?p=preview)
I have found the issue. I had loaded the navigation as a template in each view, so when I changed routes, it was causing a flicker on the ng-show item. Moving the template into my index page resolved the issue, as it is loaded once. Example:

```
 <%--Container for HTML, inclusive of AngularJS App and responsive aspects--%>
<div class="container">

    <%--Include top menu--%>
    <div data-ng-include="'../Templates/topmenu.html'"></div>

    <%--Load Angular Views--%>
    <div data-ng-view></div>

    <%--Footer of page. Could be an include as well--%>
    <hr>
    <footer></footer>
</div>

```