Navigation occurs twice for every state transition in AngularJS and Ionic

I have a side menu page defined like this : 

<body>
  <ion-side-menus>
    <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
         <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-bar>
     <ion-nav-view animation="slide-in-right"></ion-nav-view>
    </ion-side-menu-content>
<ion-side-menu side="left">
 <ion-header-bar class="bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
 <ion-content>
<div class="list side-menu-list">
<a class="item item-icon-left" ui-sref="home" menu-toggle="left">
<i class="icon ion-home"></i>
Home
</a>
<a class="item item-icon-left" ui-sref="help" menu-toggle="left">
<i class="icon ion-help-circled"></i>
Help
</a>
<a class="item item-icon-left" ui-sref="exit" menu-toggle="left" ng-click="exitApp()">
<i class="icon ion-power"></i>
Exit
</a>
</div>
 </ion-content>
</ion-side-menu>
</ion-side-menus>
<! -- scripts -->
</body>

Now to handle the states I have set up a router like this;

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('home', {
        url: "/home",
        templateUrl: "templates/home.html"
    })
   .state('help', {
        url: "/help",
        templateUrl: "templates/help.html",
        controller: "HelpController"
    });

  $urlRouterProvider.otherwise("/home");
}

And here are my templates files inside templates folder

<! --home.html  -->

<ion-view title="HOME">
    <ion-content class="padding">
        <h1>I am Home</h1>
    </ion-content>
</ion-view>

Same is help.html

Now for the problem part. When I navigate to home or help using the links from the side menu the page body always ends up sliding twice from left. The header bar behaves normal. But the body of the page slides twice and then comes into rest.

For example when I am in home.html and click on "HELP" in the side menu then the body of the page 'help' which is "I AM HELP" slides twice from left then comes into rest.

Basically event is not stopping. Bubbling phase is firing twice. How can I solve this?

I had similar problem with JQM and I used to solve it with event.stopImmediate.Propogation(). How do I do it here with Ionic and AngularJS.

Or is there any other solution or am i doing something wrong ?

This might be caused by referencing angularjs twice, it will execute the entire framework twice if you do this. Please check if you loaded angularjs multiple times.

It might be that you inserted in the side menu page with html of <ion-nav-view animation="slide-in-right"></ion-nav-view>but remember that index.html has the same within the view portion.

Try removing the slide in your html for the menu page and see if it works.