ionic tabs and side menu navigation issue with subfolders - angularjs

Question

I am using a great template for ionic tabs and side menu as having issues with the navigation from the tabs. But when I use the code pen example and structure the html files into a templates folder and update the app.js file I lose the navigation. I obviously do not understand the js link format correctly. Please could someone explain it to me.
My code pen is here
The original is here
app.js (each html file is in www/templates
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry/templates',
templateUrl: 'templates/entry.html',
controller: 'EntryPageController'
})
.state('main', {
url: '/main/templates',
templateUrl: 'templates/mainContainer.html',
abstract: true,
controller: 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'templates/home.html',
controller: 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'templates/info.html',
controller: 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs.html',
controller: 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}])
.controller('HomePageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
enter code here