how to next new sceen and hold nav title in ionic - angularjs

Question

I'm new member in ionic and I want create a simple app with menu sidebar left and in fist page I have a list item, when I click item on list I will show new sceen detail item, but I want hold navigation bar in top. Here is my sceen app I want create.
I created a menu sidebar and list item same left picture but when I set event ng-click for item in list I can't create new page same right picture.
How I can hold navigationbar and change content to new page?
Here is my code:
menu.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="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="{{dev_width}}">
<ion-header-bar class="bar-stable">
<div class="bar-header">
</div>
</ion-header-bar>
<ion-content class="custom">
<ion-list>
<ion-item menu-close href="#/menu/groupa">
<img src="{{availableImages[0].src}}" />{{availableImages[0].text}}
</ion-item>
<ion-item menu-close href="#/menu/groupb">
<img src="{{availableImages[1].src}}" />{{availableImages[1].text}}
</ion-item>
<ion-item menu-close href="#/menu/groupc">
<img src="{{availableImages[1].src}}"/>{{availableImages[0].text}}
</ion-item>
<ion-item menu-close href="#/login">
Logout
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar >
<span class="color-title" ><img src="{{availableImages[2].src}}" width="30" style="vertical-align:middle ;margin-right:15px"/>{{availableImages[2].text}} </span>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
Groupb.html:
<ion-view align-title="center">
<ion-nav-title>
<span class="color-title">Group B</span>
</ion-nav-title>
<ion-content class="list-groupa">
<div ng-show="isLoading">Loading.....</div>
<ion-list>
<ion-item ng-repeat="employee in datashow" type="item-text-wrap" ng-click="clicker(datashow)">
<span class="item-group"><b>{{employee.Type}}</b></span>
<p><span class="item-group">test desc2 {{employee.Distance.Value}}</span></p>
</ion-item>
</ion-list>
<!-- </view> -->
</ion-content>
</ion-view>
$scope.clicker = function(myValue){
$scope.dataToShare = myValue;
srvShareData.setData($scope.dataToShare);
$state.go('detailgroupb');
};
Detailgroupb.html
<ion-view align-title="center">
<ion-nav-bar >
<button ng-click="goBack()">
Set title to banana!
</button>
</ion-nav-bar>
<ion-content class="list-groupa">
<ion-list>
<ion-item ng-repeat="employee in sharedData" type="item-text-wrap" ng-click="clicker(employee)">
<!-- href="#/employee/{{employee.id}}" -->
<span class="item-group"><b>{{employee.Type}}</b></span>
<p><span class="item-group">test desc2 {{employee.Distance.Value}}</span></p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
app.js
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('login',{
url:'/login',
templateUrl:'templates/login.html',
controller: 'LoginCtrl'
})
.state('menu',{
url:'/menu',
templateUrl:'templates/menu.html',
controller:'MenuCtrl'
})
.state('menu.groupa', {
url: '/groupa',
views: {
'menuContent': {
templateUrl: 'templates/groupa.html',
controller:'GroupaCtrl'
}
}
})
.state('menu.groupc', {
url: '/groupc',
views: {
'menuContent': {
templateUrl: 'templates/groupc.html',
controller:'GroupcCtrl'
}
}
})
.state('menu.groupb', {
url: '/groupb',
views: {
'menuContent': {
templateUrl: 'templates/groupb.html',
controller:'GroupbCtrl'
}
}
})
.state('detailgroupb',{
url:'/detailgroupb',
templateUrl:'templates/detailgroupb.html',
controller:'GroupbDetailCtrl'
})
;
$urlRouterProvider.otherwise("/login");
})
.config(function($ionicConfigProvider) {
// note that you can also chain configs
$ionicConfigProvider.navBar.alignTitle('center');
});
My result: