angularjs ui-if state variable setting value async

Question

I would like to restrict the side bar until user login completed

The side bar is outside the ui-view section

I am assuming authenticated as a state variable

<div ng-controller="MyController" ui-prevent-touchmove-defaults>
    <section style="height: 100%" layout="row" flex="">
        <div ui-if="authenticated" ng-include="'pages/sidebar.html'"></div>
        <md-content id="container" style="overflow:hidden;height: 100%;padding: 0 0 0 0" ui-view flex=""></md-content>
    </section>
</div>

In JavaScript code I have an initial value

SharedState.initialize($rootScope, "authenticated", false);

But when I call this method after login

SharedState.initialize($rootScope, "authenticated", true);

The UI is not appearing, how to achieve this, is there a trigger method to do re-render?

Answer 1

Initialize method you can call one time at controller level, but trigger the ui state you can use turnOn Method

SharedState.turnOn("authenticated");

Refer the Mobile Angular UI Documentation - SharedState:turnOn