Setting the ionic-side-menu's side propert dynamically is misbehaving <ion-side-menu side="{{menuPosition}}">

Here is my code:
HTML(home.html)
`

<ion-side-menus enable-menu-with-back-views="false">
      <ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
          <ion-nav-back-button>
          </ion-nav-back-button>
    
          <ion-nav-buttons side="{{menuPosition}}">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="{{menuPosition}}">
            </button>
          </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
      </ion-side-menu-content>
    
      <ion-side-menu side="{{menuPosition}}">
        <ion-header-bar class="bar-stable">
          <h1 class="title">{{menuPosition}}</h1>
        </ion-header-bar>
        <ion-content>
          <ion-list>
            <ion-item nav-clear menu-close ng-click="login()">
              Login
            </ion-item>
            <ion-item nav-clear menu-close href="#/app/search">
              Search
            </ion-item>
            <ion-item nav-clear menu-close href="#/app/browse">
              Browse
            </ion-item>
            <ion-item nav-clear menu-close href="#/app/playlists">
              Playlists
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>

`
Controller:

angular.module('nextLevelAppModel.controllers', [])
.controller('homeCTRL', function($scope, $stateParams) {
          $scope.menuPosition="right";
});

Home.html is a abstract page. Even though I set scope variable as $scope.menuPosition=“right”, still
the toggle menu comes on left. If is hard code it as “right” its working proper.I am not able to attach screenshots directly here. So please find them here(screenshot1 screenshot2)