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.

Screenshots