How to load menu on login in Ionic?

Question

I'm facing a problem where I want to add a condition wherein I need to hide some of the buttons in the menu depending on the user who is logged in. This is easy just a simple if-else statement. My problem here is the menu loads first. I want to load the menu after I logged in. How do I do this?
Here's my code:

Code inside controller of my menu.
if (Apprsal.userSelectedData().usertype == undefined || Apprsal.userSelectedData().usertype == '')
{
    $scope.nseMenu = true;  //this is just an ng-hide in my menu
    $scope.vaMenu = false;  //this is just an ng-hide in my menu
}
else
{
    $scope.nseMenu = false;
    $scope.vaMenu = true;
}


Code of my config inside app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider

.state('app.home', {
        cache: false,
        url: '/home',
        views: {
            'menuContent': {
                templateUrl: 'templates/home.html',
                controller: 'HomeCtrl'
            }
        }
    })

.state('app', {
    url: '/app',
    abstract: true,
    cache: false,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
})
$urlRouterProvider.otherwise('/app/home');
});

EDIT:

Code for my menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
    <ion-nav-bar class="bar-stable">

        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>

<ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
        <h1 class="title"></h1>
    </ion-header-bar>

    <ion-content>
        <div class="item-input-inset search-bar">
        <div class="item-input-wrapper white">
            <input id="searchKey" type="search" placeholder="Search" ng-model="data.searchKey" autocorrect="off" />


            <button class="button button-clear" ng-click="search(data.searchKey)"><i class="ion-ios7-search ion-search"></i></button>

        </div>

    </div>
        <ion-list>
            <ion-item menu-close href="#/app/home">
                Home
            </ion-item>

            <ion-item menu-close href="#/app/testprofile" ng-hide="vaMenu">
                My Profile
            </ion-item>
            <!-- For NSE only -->
            <a href="#/app/profiles" id="btnProfiles" ng-hide="nseMenu">
            <ion-item menu-close>
                Profiles
            </ion-item>
            </a>
             <!-- end -->
             <!-- For Phase 2
            <ion-item menu-close href="#/app/notify">
                Notifications
            </ion-item>
            -->
            <a href="#">
            <ion-item menu-close ng-click="btnLogout()">
                Logout
            </ion-item>
            </a>
        </ion-list>
    </ion-content>
</ion-side-menu>

Answer 1

Sorry I am also new to Ionic but i have implemented a login. In my case i made the abstract view to the menu also but the fallback view as a new login page. And on that page i disabled the side menu. So i can suggest that you can handle it in the following way.

First make a separate login view.

Disable the side menu on that view. After successful login move to the home page and then override the scope array which is responsible for showing the list in the side menu according to the permission of the user. Hence you can restrict some feature for particular set of users. Thank You!

Answer 2

You would have to use event messaging between you controllers. (ie)., You can create custom events & pass event objects from one controller to another. This in angular, is achieved by $scope.$on , $scope.$broadcast() & $scope.$emit(). You can go through the last few sections of this documentation to acheive this. Here is another article which can help you to do the same.