How to achieve individual states using button bar in tabbed app

1

Hi,

I’m struggling to get my head around states in a tabbed app. I have 2 ‘views’ within one tabbed page template which are toggled using a button bar and ng-show like so:

<div class="button-bar">
    <a class="button" ng-class="{'button-energized text-dark': isActive('view1')}" ng-click="setActive('view1')">View 1</a>
    <a class="button" ng-class="{'button-energized text-dark': isActive('view2')}" ng-click="setActive('view2')">View 2</a>
</div>

<div id="view1" ng-show="isActive('view1')"></div>
<div id="view2" ng-show="isActive('view2')"></div>

Controller:
$scope.setActive = function(type) {
    $scope.active = type;
};

$scope.isActive = function(type) {
    return type === $scope.active;
};

The problem with this approach is that when I toggle between the 2 views, the scroll state is shared between the 2, so if I scroll down on view1, view2 is also scrolled. Essentially what I need is 2 views with independent states within 1 tabbed state. I’ve tried and tried but I can’t make sense of the routing system in a tabbed app.

How would I go about controlling and routing to these 2 views independently, each with it’s own template?

Cheers

2

it would help if you provided a simple codePen demonstrating what you have so far