Update side menu with JSON data

ionic-v1
1

I have a homePage with a simple Username field and “login” button, after a valid username is filled and login button clicked,
3 functions triggers on login
a) I generate the user related JSON data,this JSON also contains the products the user has subscribed for.
b) Each product becomes a menu item.
c) Then the side-menu slides from left side containing updated menu items

I was fortunate enough to get all three working except one ,
The menu which slides soon after I click the login shows me the old menu items, So need to refresh the page to check my updated menu,

//MENU CONTROLLER 
// productList Injected to the controller is a service which returns my products array  
.controller('MenuCtrl', function($scope,productList) {

  var prodList = productList.getProducts();
  //Initial values are false that the products will be disabled
  $scope.Shoe=false;
  $scope.Shirt=false;
  $scope.Hat=false;
  
  //Loop through the Productlist array returned by service function
  //Turns "true" if product is availabile for the user

  for(var x=0;x<prodList.length;x++){
    if(prodList[x].prodName=="Shoe"){
      $scope.Shoe=true;
    }
    if(prodList[x].prodName=="Shirt"){
      $scope.Shirt=true;
    }
    if(prodList[x].prodName=="Hat"){
      $scope.Hat=true;
    }
  
  }

 

  //Finally the menu updates with ng-if directive checking if the return value is true/false

})


//MY TEMPLATE FILE
<ion-list ng-controller="MenuCtrl"> 
        <ion-item ng-if="Shoe" nav-clear menu-close href="#/app/shoe">     Shoe    </ion-item>
        <ion-item ng-if="Shirt" nav-clear menu-close href="#/app/shirt">    Shirt  </ion-item>
        <ion-item ng-if="Hat" nav-clear menu-close href="#/app/hat">     Hat  </ion-item>
        
      </ion-list>
  </ion-content>

How am I supposed to see my updated menu without refreshing the page ?

Thank you.

2

First … Adding a separate scope for each product seems excessive. Why not use an array instead:

var prodDefaults = {
    shoe: false,
    shirt: false,
    hat: false
}

$scope.product = _.assign(prodDefaults, prodList)

Now if you get the prodList formated in the same way, you can just use lodash assign() method to override the default values as shown above, and then do the following in the view:

<ul>
    <li ng-if="product.shoe"><a ui-sref="shoepage">Shoes</a></li>
    <li ng-if="product.shirt"><a ui-sref="shirtpage">Shirts</a></li>
    <li ng-if="product.hat"><a ui-sref="hatpage">Hat</a></li>
</ul>