Ionic: close the side menu but dont set state to root - ionic-framework

Question

I want to use a side menu:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<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" width="300">
<ion-content>
<div class="list">
<a class="item item-icon-left left no-border" ui-sref="app.home" menu-close>
<i class="icon menu-icon ion-home"></i>
<h2>Hom</h2>
</a>
<a class="item item-icon-left left no-border" ui-sref="app.account" menu-close>
<i class="icon menu-icon ion-person"></i>
<h2>Item 1</h2>
</a>
<a class="item item-icon-left left no-border" ui-sref="app.orders" menu-close>
<i class="icon menu-icon ion-android-list"></i>
<h2>Item 2</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
As you can see im using the menu-close directive because i want the side menu to hide when i clicked on an item. The problem is that using this menu-close directive the state of the selected item is set to be the root. That means if i press the back button i wont get navigated back.
How can i close the menu when i click on an item without setting the selected view to be the root of the state?

Answer 1

I solve this doing the following in my menu item controllers:
angular.module("App.Home", [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
views: {
"menuContent": {
templateUrl: "templates/menu_home.html",
controller: "HomeController"
}
}
});
})
.controller("HomeController", function($scope, $ionicSideMenuDelegate) {
$ionicSideMenuDelegate.toggleLeft(false);
});
EDIT
The following is an even better solution:
Just add a controller to your side menu:
<ion-side-menu side="left" width="300" ng-controller="MenuController">
And this to your controller:
angular.module("App.Menu")
.controller("MenuController", function($scope, $ionicSideMenuDelegate) {
$scope.toggleMenu = function() {
if($ionicSideMenuDelegate.isOpenLeft()) {
$ionicSideMenuDelegate.toggleLeft(false);
} else {
$ionicSideMenuDelegate.toggleLeft(true);
}
}
});
In your menu items you just need to call:
<a class="item item-icon-left item-left item-no-border" ui-sref="app.home" ng-click="toggleMenu()">
and everything is working like a charm.