How can I link to a tabbed screen from a dashboard button and maintain navigation history in Ionic?

I'm creating an app with the initial view being a dashboard containing several buttons which link to tabbed screens. Using Ionic framework, I've linked to the tabbed screens using:

ui-sref="tab.tab1"

The problem with this is the navigation history doesn't seem to work unless I go to that screen using the actual tab bar link. The Back button does not display when I link to the screen from the dashboard but it does display when I navigate to a different tab then back to the same tab. By linking to the tabbed screen from outside of the tab bar, it seems like the navigation history isn't activated unless I actually use the tab bar.

I've tried using:

href="#/tab/tab1"

like tabs.html does but the link doesn't redirect to the relevant screen.

Is it possible to link to a tabbed page from a dashboard button while using the navigation history for tabbed screens?

I'm using the tabbed app template created by Ionic as the basis for the app.

Try this, if you need any further help let me know.

Codepen

JS

$stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.facts', {
      url: "/facts",
      views: {
        'home-tab': {
          templateUrl: "facts.html"
        }
      }
    })
    .state('tabs.facts2', {
      url: "/facts2",
      views: {
        'home-tab': {
          templateUrl: "facts2.html"
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "about.html"
        }
      }
    })
    .state('tabs.navstack', {
      url: "/navstack",
      views: {
        'about-tab': {
          templateUrl: "nav-stack.html"
        }
      }
    })
    .state('tabs.contact', {
      url: "/contact",
      views: {
        'contact-tab': {
          templateUrl: "contact.html"
        }
      }
    });

It is possible but you have to manually add the button. In your view add this:

<ion-view title="Friends">
 //ADD BACK BUTTON
 <ion-nav-buttons side="left">
  <button ng-click="goBack()" class="button button-icon icon ion-arrow-left-c">
 </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item class="item-icon-right" ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
        {{friend.name}}
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

And in your controller:

.controller('FriendsCtrl', function($scope, Friends,$ionicNavBarDelegate) {
  //GO BACK
  $scope.goBack = function()
    {
      console.log('back');
      $ionicNavBarDelegate.back();
    };
    $scope.friends = Friends.all();
})