Ionic Framwork Angular js rendering templace twice when switching between tabs - angularjs

Question

EDIT: image + code + repo
using ionic framwork
Above image is showing how the drawer tab renders the view twice on top of each other.
This happens when in /drawer => /drawer/:itemId/edit' => click on the Drawer tab
it goes back to normal when clicking on the any other tab and going back to the drawer.
my repo is
https://github.com/sebabelmar/lime
this is my app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: false,
templateUrl: "templates/tabs.html",
controller: 'TabsCtrl'
})
// Each tab has its own nav history stack:
.state('tab.requests', {
url: '/requests',
views: {
'tab-requests': {
templateUrl: 'templates/tab-requests.html',
controller: 'RequestsCtrl'
}
}
})
.state('tab.drawer', {
url: '/drawer',
views: {
'tab-drawer': {
templateUrl: 'templates/tab-drawer.html',
controller: 'DrawerCtrl'
}
}
})
.state('tab.item-detail-id', { //changed
url: '/drawer/:itemId',
views: {
'tab-drawer': {
templateUrl: 'templates/item-detail-id.html',
controller: 'ItemDetailIdCtrl'
}
}
})
.state('tab.item-detail', { //changed
url: '/drawer/:itemId/edit',
views: {
'tab-drawer': {
templateUrl: 'templates/item-detail.html',
controller: 'ItemDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/account');
});
this is my controller
angular.module('starter.controllers', [])
.controller('TabsCtrl', function($scope, User, Items, Requests) {
$scope.userLogged = false;
User.authenticate.then(function() {
console.log(User.loggedIn.username)
Items.sync(User.loggedIn.username);
Requests.sync(User.loggedIn.username);
$scope.userLogged = true;
$scope.user = User.loggedIn;
});
})
.controller('RequestsCtrl', function($scope, User, Sync, Requests) {
Requests.retrieved.then(function(){
$scope.requests = Requests.all;
console.log("from the controller", $scope.requests);
})
//keeps sync with the Factory
setInterval(function(){
$scope.requests = Requests.all },
1000);
})
.controller('ItemDetailIdCtrl', function(){
})
.controller('DrawerCtrl', function($scope, Sync, User, Items) {
var sync;
Items.retrieved.then(function(){
$scope.drawer = Items.drawer;
$scope.items = Items.all;
})
//keeps sync with the Factory
setInterval(function(){
$scope.items = Items.all },
1000);
$scope.newItem = {};
$scope.addToDrawer = function(){
console.log($scope.drawer)
$scope.newItem.owner = $scope.drawer.owner
//adds the item to Items collections
var newItemRef = Sync("items").push($scope.newItem);
itemId = newItemRef.key();
//adds item to the drawer
sync.child(itemId).set("true");
console.log("Item" + $scope.newItem.description + "added with success");
$scope.newItem = {};
}
$scope.isProvider = function(){
if(User.loggedIn.provider)
return false
else
return true
};
$scope.addRequest = function(itemKey){
Sync("requests").push({
item: itemKey,
owner: User.loggedIn.username,
date: Date.now()
})
console.log("Request added")
}
})
.controller('ItemDetailCtrl', function($scope, $stateParams, Sync, User) {
Sync("items").child($stateParams.itemId).on("value", function(snapshot){
$scope.key = snapshot.key();
$scope.item = snapshot.val();
$scope.item_edit = angular.copy($scope.item)
console.log($scope.item)
})
$scope.edit = function(){
Sync("items").child($stateParams.itemId).update({
name: $scope.item_edit.name,
desc: $scope.item_edit.desc,
price: $scope.item_edit.price
})
}
})
.controller('AccountCtrl', function($scope, $q, Sync, Auth, User, Items, Requests) {
var defer = $q.defer();
var sync = Sync("users");
sync.on("value", function(snap){
$scope.users = snap.val();
}, function(errorObject){
console.log("The read failed" + errorObject.code)
})
$scope.newUser = {};
$scope.settings = {
isFemale: true
};
$scope.addNewAuth = function(){
Auth.createUser({
email: $scope.newUser.email,
password: $scope.newUser.password
}, function(error, userData){
if (error) {
console.log("Error creating user" + error);
} else {
$scope.uid = userData.uid;
console.log("Created user authentication for" + $scope.newUser.username)
defer.resolve();
}
})
}
$scope.logIn = function(user){
Auth.authWithPassword({
email: user.email,
password: user.password
}, function(error, authData) {
if(error) {
console.log("Login failed", error)
} else {
console.log("User" + user.email + " has loggedIn", authData);
user_path = "users/" + authData.uid
$scope.authUser();
$scope.loginUser = {};
}
})
}
$scope.register = function(){
$scope.newUser.username = $scope.newUser.email.replace(/#.*/, '')
$scope.addNewAuth();
defer.promise.then(function(){
sync.child($scope.uid).set($scope.newUser)
Sync("drawers").push({owner: $scope.newUser.username})
console.log("User" + $scope.newUser.username + "registered with success")
$scope.logIn($scope.newUser)
$scope.newUser = {};
})
};
$scope.logOut = function(){Auth.unauth();$scope.userLogged=false};
$scope.alwaysHide = function(){return true}
});
this is my drawer where you can click on edit icon to go into item details
<ion-view view-title="Drawer" ng-if="userLogged" >
<ion-header-bar class="bar-stable">
<h1 class="title">Drawer</h1>
<div class="buttons">
<button class="button button-icon ion-plus-circled" ng-click="upload()"></button>
</div>
</ion-header-bar>
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)" >
<ion-slide ng-repeat="(key, item) in items">
<div class="slide-container">
<div class="item item-avatar" >
<img ng-src="{{item.pic}}">
<h2>{{item.name}}</h2>
<p>{{item.desc}}</p>
<div class='price'>
$ {{item.price}}
<!-- <div class='ion-cash'></div> -->
</div>
</div>
<div class="item-image">
<img class="item-pic" ng-src="{{item.pic}}">
</div>
</div>
<!-- This needs Ng way to do ng class and logic to show and hide -->
<div class="buttons">
<a class="edit-button dark" ng-href="#/tab/drawer/{{key}}/edit" ng-show="isProvider()">
<i class="icon ion-edit"></i>
</a>
<a class="item item-icon-left" href="#" ng-click="addRequest(key)" ng-hide="isProvider()">
<i class="icon ion-code-download"></i>
</a>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
here is item detail edit
<ion-view >
<ion-header-bar class="bar-stable">
<h1 class="title">{{item.name}}</h1>
</ion-header-bar>
<ion-content>
<div class="slide-container">
<div class="item item-avatar" >
<img ng-src="{{item.pic}}">
<h2><input type="text" value="{{item.name}}" ng-model="item_edit.name"></h2>
<p><input type="text" value="{{item.desc}}" ng-model="item_edit.desc"></p>
<p id='dollar'>$</p>
<div class='price-edit'>
<label class="price-label item-input">
<input class="price-input" type="text" value="{{item.price}}" ng-model="item_edit.price">
</label>
</div>
</div>
<div class="item-image">
<img class="item-pic" ng-src="{{item.pic}}">
</div>
</div>
<div class=" buttons">
<div class="button-edit">
<a class="edit-button dark" href='' ng-click="edit()">
<i class="icon ion-edit"></i>
</a>
</div>
</div>
</ion-content>
</ion-view>
thanks for reading :D if there is any more info you need inorder to solve my issue i ll gladly provide but i have posted my repo up top